Properties

This page lists all of the custom system properties, how are they linked with the theme, and which CSS properties they compute. All other regular CSS properties and selectors are supported too.

Legend

Let's take the following row from the table below, for example:

System style function	System key(s)	CSS property/properties	Theme mapping
spacing	mb, marginBottom	margin-bottom	theme.spacing(value)

System style function

The System style function column lists the function which generates the properties shown in the other columns, as a reference in case you want to add this functionality to your custom components. The functions can be imported from @material-ui/system. You can see an example of using the style functions on the advanced page. The content links to the documentation page where this properties are described; in this example, the spacing page.

System keys

The System keys column lists the key(s) by which you can use this property with the sx prop (or as a system function).

CSS properties

The CSS property column describes which CSS property will be generated when this system property is used.

Theme mapping

Lastly, the Theme key column tells you how this property is wired with the theme – with this example, whatever value you provide will be used as input to the theme.spacing helper.

Let's take a look at an example:

<Box sx={{ mb: 3 }} />

// is equivalent to
<Box sx={{ marginBottom: theme => theme.spacing(3)}} />

As the default theme spacing is 8px, this will result in the following CSS class:

.hash-MuiBox {
  margin-bottom: 24px;
}

Properties reference table

Note that this table only lists custom properties, all other regular CSS properties and selectors are supported.

System style function	System key(s)	CSS property/properties	Theme mapping
border	border	border	${value}px solid
borderBottom	borderBottom	border-bottom	${value}px solid
borderColor	borderColor	border-color	theme.palette[value]
borderLeft	borderLeft	border-left	${value}px solid
borderRadius	borderRadius	border-radius	theme.shape.borderRadius * value
borderRight	borderRight	border-right	${value}px solid
borderTop	borderTop	border-top	${value}px solid
boxShadow	boxShadow	box-shadow	theme.shadows[value]
displayPrint	displayPrint	display	none
displayRaw	display	display	none
alignContent	alignContent	align-content	none
alignItems	alignItems	align-items	none
alignSelf	alignSelf	align-self	none
flex	flex	flex	none
flexDirection	flexDirection	flex-direction	none
flexGrow	flexGrow	flex-grow	none
flexShrink	flexShrink	flex-shrink	none
flexWrap	flexWrap	flex-wrap	none
justifyContent	justifyContent	justify-content	none
order	order	order	none
gap	gap	gap	none
columnGap	columnGap	column-gap	none
rowGap	rowGap	row-gap	none
gridColumn	gridColumn	grid-column	none
gridRow	gridRow	grid-row	none
gridAutoFlow	gridAutoFlow	grid-auto-flow	none
gridAutoColumns	gridAutoColumns	grid-auto-columns	none
gridAutoRows	gridAutoRows	grid-auto-rows	none
gridTemplateColumns	gridTemplateColumns	grid-template-columns	none
gridTemplateRows	gridTemplateRows	grid-template-rows	none
gridTemplateAreas	gridTemplateAreas	grid-template-areas	none
gridArea	gridArea	grid-area	none
bgcolor	bgcolor	backgroundColor	theme.palette[value]
color	color	color	theme.palette[value]
bottom	bottom	bottom	none
left	left	left	none
position	position	position	none
right	right	right	none
top	top	top	none
zIndex	zIndex	z-index	theme.zIndex[value]
height	height	height	none
maxHeight	maxHeight	max-height	none
maxWidth	maxWidth	max-width	none
minHeight	minHeight	min-height	none
minWidth	minWidth	min-width	none
width	width	width	none
boxSizing	boxSizing	box-sizing	none
spacing	m, margin	margin	theme.spacing(value)
spacing	mb, marginBottom	margin-bottom	theme.spacing(value)
spacing	ml, marginLeft	margin-left	theme.spacing(value)
spacing	mr, marginRight	margin-right	theme.spacing(value)
spacing	mt, marginTop	margin-top	theme.spacing(value)
spacing	mx, marginX	margin-left, margin-right	theme.spacing(value)
spacing	my, marginY	margin-top, margin-bottom	theme.spacing(value)
spacing	p, padding	padding	theme.spacing(value)
spacing	pb, paddingBottom	padding-bottom	theme.spacing(value)
spacing	pl, paddingLeft	padding-left	theme.spacing(value)
spacing	pr, paddingRight	padding-right	theme.spacing(value)
spacing	pt, paddingTop	padding-top	theme.spacing(value)
spacing	px, paddingX	padding-left, padding-right	theme.spacing(value)
spacing	py, paddingY	padding-top, padding-bottom	theme.spacing(value)
typography	typography	font-family, font-weight, font-size, line-height, letter-spacing, text-transform	theme.typography[value]
fontFamily	fontFamily	font-family	theme.typography[value]
fontSize	fontSize	font-size	theme.typography[value]
fontStyle	fontStyle	font-style	theme.typography[value]
fontWeight	fontWeight	font-weight	theme.typography[value]
letterSpacing	letterSpacing	letter-spacing	theme.typography[value]
lineHeight	lineHeight	line-height	theme.typography[value]
textAlign	textAlign	text-align	none