MUI 最佳實踐

目錄

本文假設您遵循我們的推薦做法，使用我們的 Material UI 主題。遵循以下步驟可最大限度地提高與 Docker Desktop 的相容性，並最大限度地減少作為擴充套件作者所需的工作。它們應被視為對 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，那麼當我們的核心主題發生變化時，將來更改它會更容易。您可以使用

  • 現有元件的新 variant - 請參閱 MUI 文件
  • MUI mixin（在主題內定義的自由形式可重用樣式規則包）
  • 新的 可重用元件

上述某些選項要求您擴充套件我們的 MUI 主題。請參閱有關 主題組合 的 MUI 文件。

下一步是什麼？