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