Properties

This page lists all of the custom system properties, how are they linked with the theme, and which CSS properties they compute.

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

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

1. The Group column links to the documentation page where this group of properties is described; in this example, the spacing page.

2. 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.

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

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

5. And lastly, the Theme key column tells you how this property is wired with the theme – with this example, whatever value you might use 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

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