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.

Properties reference table

Note that this table only lists custom properties, all other regular CSS properties and selectors are supported. You can check out the legend below.

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

Legend

Let's take one row from the table above, for example:

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

and detail each column:

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

    <Button sx={{ mb: 3 }}>
    // or
    <Box mb={3}>
    // or
    <Box marginBottom={3}>
  • CSS properties. The column describes which CSS property will be generated when this system property is used.

    .my-class {
      margin-bottom: Xpx;
    }
  • System style function. The 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.

  • Theme mapping. Lastly, the 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:

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

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

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

.my-class {
  margin-bottom: 24px;
}