Properties 属性

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

属性参考表

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

图例

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

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}>
  

  Copy (or $keyC)

• 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 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;
}