属性

本页列出了所有的自定义系统属性，解释了它们是如何与主题链接的，以及它们所计算的 CSS 属性。 所有其他常规的 CSS 属性和选择器也被支持。

图例

以 下面表 中的一行为例：

系统样式函数	系统键	CSS 属性	主题映射
spacing	mb, marginBottom	margin-bottom	theme.spacing(value)

系统样式函数

系统样式函数列列出了生成其他列中显示的属性的函数，以作为你要将此功能添加到自定义组件中的参考。 函数可以从 @material-ui/system 导入。 你可以在 进阶页面 上看到使用样式函数的例子。 The content links to the documentation page where this properties are described; in this example, the spacing page.

系统键

系统键一列列出了你可以通过 sx 属性（或作为系统函数）使用此属性的键。

CSS 属性

CSS 属性列描述了当使用该系统属性时，将生成哪个CSS属性。

主题映射

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.

让我们看看一个例子：

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

// 等同于
<Box sx={{ marginBottom: theme => theme.spacing(3)}} />

由于默认的主题间距是 8px，这将生成以下 CSS 类：

.hash-MuiBox {
  margin-bottom: 24px;
}

属性参考表

请注意，此表仅列出自定义属性，支持所有其他常规的 CSS 属性和选择器。

系统样式函数	系统键	CSS 属性	主题映射
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