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.

Legend

Vamos tomar, como exemplo, a seguinte linha da tabela abaixo, exemplo:

Função de estilo do sistema	Chave(s) do sistema	Propriedade CSS/propriedades	Mapeamento no tema
spacing	mb, marginBottom	margin-bottom	theme.spacing(value)

Função de estilo do sistema

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. The content links to the documentation page where this properties are described; in this example, the spacing page.

System keys

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

CSS properties

A coluna Propriedade CSS descreve qual propriedade CSS será gerada quando essa propriedade do sistema for usada.

Mapeamento no tema

Lastly, the Theme key 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:

<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

Note that this table only lists custom properties, all other regular CSS properties and selectors are supported.

Função de estilo do sistema	Chave(s) do sistema	Propriedade CSS/propriedades	Mapeamento no tema
border	border	border	${value}px solid
borderBottom	borderBottom	border-bottom	${value}px solid
borderColor	borderColor	border-color	theme.palette[value]
borderLeft	borderLeft	border-left	${value}px solid
borderRadius	borderRadius	border-radius	theme.shape.borderRadius * value
borderRight	borderRight	border-right	${value}px solid
borderTop	borderTop	border-top	${value}px solid
boxShadow	boxShadow	box-shadow	theme.shadows[value]
displayPrint	displayPrint	display	none
displayRaw	display	display	none
alignContent	alignContent	align-content	none
alignItems	alignItems	align-items	none
alignSelf	alignSelf	align-self	none
flex	flex	flex	none
flexDirection	flexDirection	flex-direction	none
flexGrow	flexGrow	flex-grow	none
flexShrink	flexShrink	flex-shrink	none
flexWrap	flexWrap	flex-wrap	none
justifyContent	justifyContent	justify-content	none
order	order	order	none
gap	gap	gap	none
columnGap	columnGap	column-gap	none
rowGap	rowGap	row-gap	none
gridColumn	gridColumn	grid-column	none
gridRow	gridRow	grid-row	none
gridAutoFlow	gridAutoFlow	grid-auto-flow	none
gridAutoColumns	gridAutoColumns	grid-auto-columns	none
gridAutoRows	gridAutoRows	grid-auto-rows	none
gridTemplateColumns	gridTemplateColumns	grid-template-columns	none
gridTemplateRows	gridTemplateRows	grid-template-rows	none
gridTemplateAreas	gridTemplateAreas	grid-template-areas	none
gridArea	gridArea	grid-area	none
bgcolor	bgcolor	backgroundColor	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	zIndex	z-index	theme.zIndex[value]
height	height	height	none
maxHeight	maxHeight	max-height	none
maxWidth	maxWidth	max-width	none
minHeight	minHeight	min-height	none
minWidth	minWidth	min-width	none
width	width	width	none
boxSizing	boxSizing	box-sizing	none
spacing	m, margin	margin	theme.spacing(value)
spacing	mb, marginBottom	margin-bottom	theme.spacing(value)
spacing	ml, marginLeft	margin-left	theme.spacing(value)
spacing	mr, marginRight	margin-right	theme.spacing(value)
spacing	mt, marginTop	margin-top	theme.spacing(value)
spacing	mx, marginX	margin-left, margin-right	theme.spacing(value)
spacing	my, marginY	margin-top, margin-bottom	theme.spacing(value)
spacing	p, padding	padding	theme.spacing(value)
spacing	pb, paddingBottom	padding-bottom	theme.spacing(value)
spacing	pl, paddingLeft	padding-left	theme.spacing(value)
spacing	pr, paddingRight	padding-right	theme.spacing(value)
spacing	pt, paddingTop	padding-top	theme.spacing(value)
spacing	px, paddingX	padding-left, padding-right	theme.spacing(value)
spacing	py, paddingY	padding-top, padding-bottom	theme.spacing(value)
typography	typography	font-family, font-weight, font-size, line-height, letter-spacing, text-transform	theme.typography[value]
fontFamily	fontFamily	font-family	theme.typography[value]
fontSize	fontSize	font-size	theme.typography[value]
fontStyle	fontStyle	font-style	theme.typography[value]
fontWeight	fontWeight	font-weight	theme.typography[value]
letterSpacing	letterSpacing	letter-spacing	theme.typography[value]
lineHeight	lineHeight	line-height	theme.typography[value]
textAlign	textAlign	text-align	none