MUI 最佳實務

目錄

本文假設您遵循我們的建議做法，使用我們的 Material UI 主題UI 樣式概觀 中的非 MUI 特定指導方針的補充。

假設主題隨時可能變更

請勿嘗試使用精確的顏色、偏移量和字體大小來微調您的 UI，使其盡可能美觀。 您今天所做的任何特殊調整都將與目前的 MUI 主題相關，並且在主題更改時可能會看起來更糟。 主題的任何部分都可能在沒有警告的情況下發生變化，包括（但不限於）

  • 字體或字體大小
  • 邊框粗細或樣式
  • 顏色
    • 我們的調色板成員（例如 `red-100`）可能會更改其 RGB 值
    • 語義顏色（例如 `error`、`primary`、`textPrimary` 等）可能會更改為使用我們調色板的不同成員
    • 背景顏色（例如頁面或對話框的背景顏色）可能會更改
  • 間距
    • 間距基本單元的大小（透過 `theme.spacing` 公開。例如，我們可能會允許使用者自訂 UI 的密度）
    • 段落或網格項目之間的預設間距

建構 UI 的最佳方式，使其能夠抵禦未來的主題變更，是

  • 盡可能減少覆蓋預設樣式。
  • 使用語義排版。例如，使用具有適當 `variant` 的 `Typography` 或 `Link`，而不是直接使用排版 HTML 元素（`<a>`、`<p>`、`<h1>` 等）。
  • 使用預設大小。例如，在按鈕上使用 `size="small"`，或在圖示上使用 `fontSize="small"`，而不是以像素指定大小。
  • 優先使用語義顏色。例如，使用 `error` 或 `primary` 而不是明確的顏色代碼。
  • 盡量減少 CSS 的編寫。改用語義標記。例如，如果您想要間隔文字段落，請在您的 `Typography` 實例上使用 `paragraph` 屬性。如果您想間隔其他內容，請使用具有預設間距的 `Stack` 或 `Grid`。
  • 使用您在 Docker Desktop UI 中看到的視覺習慣用語，因為這些是我們將針對任何主題變更進行測試的主要習慣用語。

當您進行自訂時，請將其集中化

有時您需要我們設計系統中不存在的 UI 片段。如果是這樣，我們建議您先與我們聯繫。我們內部設計系統中可能已經有類似的東西，或者我們可以擴展我們的設計系統以適應您的使用案例。

如果您在與我們聯繫後仍決定自行建構，請嘗試以可重複使用的方式定義新的 UI。如果您只在一個地方定義您的自訂 UI，那麼如果我們的核心主題發生變化，將來更容易更改。您可以使用

  • 現有元件的新變體 - 請參閱 MUI 文件
  • 一個 MUI mixin（一個在主題內定義的、可重複使用的樣式規則的自由組合）
  • 一個新的可重複使用的元件

以上某些選項需要您擴展我們的 MUI 主題。請參閱 MUI 文件中關於主題組合 的說明。

下一步是什麼？