MUI 最佳實踐

目錄

本文假設您按照我們推薦的做法，使用我們的 Material UI 主題. 按照以下步驟可以最大程度地與 Docker Desktop 相容，並最大程度地減少您作為擴充套件作者需要完成的工作。 這些步驟應被視為對 UI 樣式概述 中找到的非 MUI 特定指南的補充。

假設主題隨時可能更改

不要急於使用精確的顏色、偏移量和字型大小來微調您的 UI，以使其看起來儘可能吸引人。 您今天所做的任何專門化都是相對於當前的 MUI 主題的，並且在主題更改時可能看起來更糟。 主題的任何部分都可能在沒有任何警告的情況下發生更改，包括（但不限於）

  • 字型或字型大小
  • 邊框厚度或樣式
  • 顏色
    • 我們的調色盤成員（例如 red-100）可能會更改其 RGB 值
    • 語義顏色（例如 error、primary、textPrimary 等）可能被更改為使用調色盤中的其他成員
    • 背景顏色（例如頁面或對話方塊的背景顏色）可能更改
  • 間距
    • 基本間距單位的大小（透過 theme.spacing 公開）。 例如，我們可能允許使用者自定義 UI 的密度
    • 段落或網格項之間的預設間距

構建 UI 的最佳方法是，使其能夠在未來的主題更改中保持穩定，方法是

  • 儘可能少地覆蓋預設樣式。
  • 使用語義排版。 例如，使用 Typography 或 Link 的適當 variant，而不是直接使用排版 HTML 元素（<a>、<p>、<h1> 等）。
  • 使用預定義大小。 例如，在按鈕上使用 size="small"，或在圖示上使用 fontSize="small"，而不是以畫素為單位指定大小。
  • 優先使用語義顏色。 例如，使用 error 或 primary，而不是顯式顏色程式碼。
  • 儘可能少地編寫 CSS。 相反，編寫語義標記。 例如，如果要使文字段落之間留出間距，請在 Typography 例項上使用 paragraph 屬性。 如果要使其他內容之間留出間距，請使用帶有預設間距的 Stack 或 Grid。
  • 使用您在 Docker Desktop UI 中看到過的視覺慣例，因為這些是我們測試任何主題更改的主要慣例。

自定義時，請集中管理

有時您需要一個我們的設計系統中不存在的 UI 元素。 如果是這種情況，我們建議您首先與我們聯絡。 我們可能已經在我們的內部設計系統中擁有它，或者我們可能能夠擴充套件我們的設計系統以適應您的用例。

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

  • 現有元件的新 variant - 請參閱 MUI 文件
  • MUI 混合器（在主題內部定義的、可重用樣式規則的自由格式捆綁包）
  • 新的 可重用元件

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

下一步是什麼？