跳转到内容

Properties 属性

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

属性参考表

请注意,此表仅列出自定义属性,支持所有其他常规的 CSS 属性和选择器。 您可以参考下面的 图例

系统键 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 theme.spacing(value)
columnGap column-gap columnGap theme.spacing(value)
rowGap row-gap rowGap theme.spacing(value)
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)
marginInline margin-inline spacing theme.spacing(value)
marginInlineStart margin-inline-start spacing theme.spacing(value)
marginInlineEnd margin-inline-end spacing theme.spacing(value)
marginBlock margin-block spacing theme.spacing(value)
marginBlockStart margin-block-start spacing theme.spacing(value)
marginBlockEnd margin-block-end 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)
paddingInline padding-inline spacing theme.spacing(value)
paddingInlineStart padding-inline-start spacing theme.spacing(value)
paddingInlineEnd padding-inline-end spacing theme.spacing(value)
paddingBlock padding-block spacing theme.spacing(value)
paddingBlockStart padding-block-start spacing theme.spacing(value)
paddingBlockEnd padding-block-end 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. 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. 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. The functions can be imported from @mui/system. 你可以在 进阶页面 上看到使用样式函数的例子。 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. The functions can be imported from @mui/system. You can see an example of using the style functions on the Custom components page. The content links to the documentation page where this properties are described; in this example, the spacing page.

  • Theme mapping. 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 }} />

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

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

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