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

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">mb</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token comment">// or</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Box</span></span> <span class="token attr-name">mb</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token comment">// or</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Box</span></span> <span class="token attr-name">marginBottom</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>

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

<span class="token selector">.my-class</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> Xpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

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:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">mb</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>

<span class="token comment">// is equivalent to</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token function-variable function">marginBottom</span><span class="token operator">:</span> <span class="token parameter">theme</span> <span class="token operator">=></span> theme<span class="token punctuation">.</span><span class="token function">spacing</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>

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

<span class="token selector">.my-class</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>