Skip to content
+

Properties

This API page lists all the custom MUI System properties, how they are linked with the theme, and which CSS properties they compute.

While this page documents the custom properties, MUI System was designed to be a superset of CSS, so 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 too. 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 theme.spacing(value)
columnGap column-gap columnGap theme.spacing(value)
rowGap row-gap rowGap theme.spacing(value)
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 background-color 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)
marginInline margin-inline spacing theme.spacing(value)
marginInlineStart margin-inline-start spacing theme.spacing(value)
marginInlineEnd margin-inline-end spacing theme.spacing(value)
marginBlock margin-block spacing theme.spacing(value)
marginBlockStart margin-block-start spacing theme.spacing(value)
marginBlockEnd margin-block-end 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)
paddingInline padding-inline spacing theme.spacing(value)
paddingInlineStart padding-inline-start spacing theme.spacing(value)
paddingInlineEnd padding-inline-end spacing theme.spacing(value)
paddingBlock padding-block spacing theme.spacing(value)
paddingBlockStart padding-block-start spacing theme.spacing(value)
paddingBlockEnd padding-block-end 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 @mui/system. You can see an example of using the style functions on the Custom components 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;
}