Properties 属性

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

属性参考表

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

图例

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

and detail each column:

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

  <Button sx={{ mb: 3 }}>
  // or
  <Box mb={3}>
  // or
  <Box marginBottom={3}>
  

  Copy (Or $keyC)

• CSS properties. CSS properties. CSS properties. The column describes which CSS property will be generated when this system property is used.

  .my-class {
    margin-bottom: Xpx;
  }
  

  Copy (Or $keyC)

• 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). 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 advanced 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. 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;
}