Skip to content

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