Pular para o conteúdo

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

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. The content links to the documentation page where this properties are described; in this example, the spacing page. You can see an example of using the style functions on the Custom components page. Você pode ver um exemplo de como usar as funções de estilo na página avançada.

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