属性

此 API 页面列出了所有自定义 MUI System 属性，它们如何与主题关联，以及它们计算出的 CSS 属性。

虽然此页面记录了自定义属性，但 MUI System 被设计为 CSS 的超集，因此也支持所有其他常规 CSS 属性和选择器。

属性参考表

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

图例

让我们从上面的表格中取一行，例如

并详细说明每一列

• 系统键。此列列出了您可以通过哪些键使用 sx prop（或作为系统函数）来使用此属性。

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

  复制已复制（或 $keyC）

• CSS 属性。此列描述了使用此系统属性时将生成的 CSS 属性。

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

  复制已复制（或 $keyC）

• 系统样式函数。此列列出了生成其他列中显示的属性的函数，作为参考，以防您想将此功能添加到您的自定义组件中。这些函数可以从 @mui/system 导入。您可以在自定义组件页面上看到使用样式函数的示例。内容链接到描述此属性的文档页面；在本例中，链接到间距页面。

• 主题映射。最后，此列告诉您此属性如何与主题关联——在本例中，您提供的任何值都将用作 theme.spacing 辅助函数的输入。

让我们看一个例子

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

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

由于默认主题间距为 8px，这将导致以下 CSS 类

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