MUI 最佳實踐

本文假設您遵循我們的建議作法，使用我們的 Material UI 主題。遵循以下步驟可最大化與 Docker Desktop 的相容性，並減少身為擴充功能開發者所需的作業。這些建議應視為 UI 樣式概觀中非 MUI 特定指南的補充內容。

假設主題隨時可能變更

請克制使用精確的顏色、位移和字體大小來微調 UI 以追求美觀的衝動。您今天所做的任何自訂都是相對於當前 MUI 主題的，當主題變更時，顯示效果可能會變差。主題的任何部分都可能在無預警的情況下變更，包括（但不限於）：

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

為了確保您的 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 主題。請參閱關於主題組合 (theme composition) 的 MUI 文件。