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.
Vamos tomar, como exemplo, a seguinte linha da tabela abaixo, exemplo:
| Grupo | Função de estilo do sistema | Chave(s) do sistema | Propriedade CSS/propriedades | Mapeamento no tema |
|---|---|---|---|---|
| spacing | spacing |
mb, marginBottom |
margin-bottom |
theme.spacing(value) |
A coluna Grupo contém links para a página da documentação onde esse grupo de propriedades é descrito; neste exemplo, a página de espaçamento.
A coluna Função de estilo do sistema lista a função que gera as propriedades mostradas nas outras colunas, como referência para o caso de querer adicionar esta funcionalidade aos seus componentes customizados. 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.A coluna Chave(s) do sistema lista chaves(s) através da qual você pode usar com a propriedade
sx(ou como uma função do sistema).A coluna Propriedade CSS descreve qual propriedade CSS será gerada quando essa propriedade do sistema for usada.
E por último, a coluna Mapeamento no tema diz a você como essa propriedade é ligada com o tema - com este exemplo, qualquer valor que você possa usar, será usado como entrada para o utilitário
theme.spacing.
Vamos dar uma olhada em um exemplo:
<Box sx={{ mb: 3 }} />
// é equivalente a
<Box sx={{ marginBottom: theme => theme.spacing(3)}} />Como o espaçamento padrão do tema é 8px, isso resultará na seguinte classe CSS:
.hash-MuiBox {
margin-bottom: 24px;
}Tabela de referências de propriedades
| Grupo | Função de estilo do sistema | Chave(s) do sistema | Propriedade CSS/propriedades | Mapeamento no tema |
|---|---|---|---|---|
| borders | border |
border |
border |
${value}px solid |
| borders | borderBottom |
borderBottom |
border-bottom |
${value}px solid |
| borders | borderColor |
borderColor |
border-color |
theme.palette[value] |
| borders | borderLeft |
borderLeft |
border-left |
${value}px solid |
| borders | borderRadius |
borderRadius |
border-radius |
theme.shape.borderRadius*value |
| borders | borderRight |
borderRight |
border-right |
${value}px solid |
| borders | borderTop |
borderTop |
border-top |
${value}px solid |
| shadows | boxShadow |
boxShadow |
box-shadow |
theme.shadows[value] |
| display | displayPrint |
displayPrint |
display |
none |
| display | displayRaw |
display |
display |
none |
| flexbox | alignContent |
alignContent |
align-content |
none |
| flexbox | alignItems |
alignItems |
align-items |
none |
| flexbox | alignSelf |
alignSelf |
align-self |
none |
| flexbox | flex |
flex |
flex |
none |
| flexbox | flexDirection |
flexDirection |
flex-direction |
none |
| flexbox | flexGrow |
flexGrow |
flex-grow |
none |
| flexbox | flexShrink |
flexShrink |
flex-shrink |
none |
| flexbox | flexWrap |
flexWrap |
flex-wrap |
none |
| flexbox | justifyContent |
justifyContent |
justify-content |
none |
| flexbox | order |
order |
order |
none |
| palette | bgcolor |
bgcolor |
backgroundColor |
theme.palette[value] |
| palette | color |
color |
color |
theme.palette[value] |
| positions | bottom |
bottom |
bottom |
none |
| positions | left |
left |
left |
none |
| positions | position |
position |
position |
none |
| positions | right |
right |
right |
none |
| positions | top |
top |
top |
none |
| positions | zIndex |
zIndex |
z-index |
theme.zIndex[value] |
| sizing | height |
height |
height |
none |
| sizing | maxHeight |
maxHeight |
max-height |
none |
| sizing | maxWidth |
maxWidth |
max-width |
none |
| sizing | minHeight |
minHeight |
min-height |
none |
| sizing | minWidth |
minWidth |
min-width |
none |
| sizing | width |
width |
width |
none |
| sizing | boxSizing |
boxSizing |
box-sizing |
none |
| spacing | spacing |
m, margin |
margin |
theme.spacing(value) |
| spacing | spacing |
mb, marginBottom |
margin-bottom |
theme.spacing(value) |
| spacing | spacing |
ml, marginLeft |
margin-left |
theme.spacing(value) |
| spacing | spacing |
mr, marginRight |
margin-right |
theme.spacing(value) |
| spacing | spacing |
mt, marginTop |
margin-top |
theme.spacing(value) |
| spacing | spacing |
mx, marginX |
margin-left, margin-right |
theme.spacing(value) |
| spacing | spacing |
my, marginY |
margin-top, margin-bottom |
theme.spacing(value) |
| spacing | spacing |
p, padding |
padding |
theme.spacing(value) |
| spacing | spacing |
pb, paddingBottom |
padding-bottom |
theme.spacing(value) |
| spacing | spacing |
pl, paddingLeft |
padding-left |
theme.spacing(value) |
| spacing | spacing |
pr, paddingRight |
padding-right |
theme.spacing(value) |
| spacing | spacing |
pt, paddingTop |
padding-top |
theme.spacing(value) |
| spacing | spacing |
px, paddingX |
padding-left, padding-right |
theme.spacing(value) |
| spacing | spacing |
py, paddingY |
padding-top, padding-bottom |
theme.spacing(value) |
| typography | typography |
typography |
font-family, font-weight, font-size, line-height, letter-spacing, text-transform |
theme.typography[value] |
| typography | fontFamily |
fontFamily |
font-family |
theme.typography[value] |
| typography | fontSize |
fontSize |
font-size |
theme.typography[value] |
| typography | fontWeight |
fontWeight |
font-weight |
theme.typography[value] |
| typography | textAlign |
textAlign |
text-align |
none |