属性

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

属性参考表

请注意，此表仅列出自定义属性，支持所有其他常规的 CSS 属性和选择器。 You can check out the legend below.

系统键	CSS 属性	系统样式函数	主题映射
`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`	none
`columnGap`	`column-gap`	`columnGap`	none
`rowGap`	`row-gap`	`rowGap`	none
`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)`
`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)`
`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

图例

Let's take one row from the table above, for example:

系统键	CSS 属性	系统样式函数	主题映射
`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. 函数可以从 @material-ui/system 导入。你可以在进阶页面上看到使用样式函数的例子。 The content links to the documentation page where this properties are described; in this example, the spacing page.
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.

让我们看看一个例子：

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

// is equivalent to
<Button sx={{ marginBottom: theme => theme.spacing(3)}} />

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

.my-class {
  margin-bottom: 24px;
}