Propriedades

Esta página lista todas as propriedades de sistema customizadas, como elas estão ligadas com o tema e quais propriedades CSS eles calculam. All other regular CSS properties and selectors are supported too.

Tabela de referências de propriedades

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

Chave(s) do sistema	Propriedade CSS/propriedades	Função de estilo do sistema	Mapeamento no tema
`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:

Chave(s) do sistema	Propriedade CSS/propriedades	Função de estilo do sistema	Mapeamento no tema
`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. As funções podem ser importadas de @material-ui/system. Você pode ver um exemplo de como usar as funções de estilo na página avançada. 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.

Vamos dar uma olhada em um exemplo:

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

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

Como o espaçamento padrão do tema é 8px, isso resultará na seguinte classe CSS:

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