屬性

此 API 頁面列出了所有自訂 MUI 系統屬性、它們如何與主題連結，以及它們計算出的 CSS 屬性。

雖然此頁面記錄了自訂屬性，但 MUI 系統被設計為 CSS 的超集，因此也支援所有其他常規 CSS 屬性和選擇器。

屬性參考表

請注意，此表僅列出自訂屬性。所有其他常規 CSS 屬性和選擇器也受支援。您可以查看下面的圖例。

圖例

讓我們從上面的表格中取一行，例如

並詳細說明每一欄

• 系統鍵。此欄列出了您可以使用 sx 屬性（或作為系統函式）使用此屬性的鍵。

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