属性

本页列出了所有的自定义系统属性，解释了它们是如何与主题链接的，以及它们所计算的 CSS 属性。

以 下面表 中的一行为例：

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

1. 组列链接到描述该组属性的文档页面；在本例中，它是链接到 spacing 页面。

2. 系统样式函数列列出了生成其他列中显示的属性的函数，以作为你要将此功能添加到自定义组件中的参考。 函数可以从 @material-ui/system 导入。 你可以在 进阶页面 上看到使用样式函数的例子。

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

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

5. 最后，主题键列告诉你这个属性如何与主题连接 – 在这个例子中，你使用的任何值都将用作 theme.spacing 助手的输入。

让我们看看一个例子：

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

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

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

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

属性参考表

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