MUI 最佳实践

本文假设您正在遵循我们的建议，使用我们的 Material UI 主题。 按照以下步骤操作，可最大程度地确保与 Docker Desktop 的兼容性，并最小化您作为扩展开发者所需完成的工作。 这些步骤应视为对 UI 样式概述 中非 Material UI 专属指南的补充。

假设主题可以随时更改

抵制通过精确调整颜色、偏移量和字体大小来美化界面的诱惑。您今天所做的任何定制都仅相对于当前的 MUI 主题有效，一旦主题发生更改，界面可能反而显得更差。主题的任何部分都可能在未经通知的情况下发生更改，包括但不限于以下内容：

• 字体，或字体大小
• 边框粗细或样式
• 颜色：
  • 调色板成员（例如 red-100）的 RGB 值可以更改
  • 语义颜色（例如 error、primary、textPrimary 等）可更改为使用调色板中的其他成员
  • 背景颜色（例如页面或对话框的背景色）可以更改
• 间距：
  • 基本间距单位的大小，（通过 theme.spacing 暴露）。例如，我们可以允许用户自定义界面的密度。
  • 段落之间或网格项之间的默认间距。

构建用户界面的最佳方式是：使其能够抵御未来主题更改的影响。

• 尽可能少地覆盖默认样式。
• 使用语义化排版。例如，使用带适当下标或上标的 Typography 或 Link（如 variant），而非直接使用排版 HTML 元素（如 <a>、<p>、<h1> 等）。
• 使用预设尺寸。例如，在按钮上使用 size="small"，或在图标上使用 fontSize="small"，而不是以像素指定尺寸。
• 优先使用语义化颜色。例如，使用 error 或 primary 而非显式颜色代码。
• 尽量少写 CSS。改用语义化标记。例如，如果你想为段落文本添加间距，请在 paragraph 实例上使用 Typography 属性；如果要为其他元素添加间距，请使用 Stack 或 Grid，并采用默认间距。
• 使用您在 Docker Desktop 界面中见过的视觉元素，因为这些是我们测试主题变更时的主要依据。

自定义时，实现集中化管理

有时您可能需要一个在我们设计系统中不存在的用户界面元素。如果是这种情况，我们建议您先与我们联系。我们可能已在内部设计系统中拥有相关组件，或可扩展设计系统以满足您的使用场景。

如果您在联系我们之后仍然决定自行构建，请尝试以可复用的方式定义新的用户界面。如果您将自定义界面仅在一个地方进行定义，将来当我们的核心主题发生变化时，将更易于调整。您可以使用：

• 现有组件的新 variant —— 请参阅 MUI 文档
• 一个 MUI 混入（一种自由形式的可复用样式规则集合，定义在主题内部）
• 一个新的 可复用组件

上述部分选项需要您扩展我们的 MUI 主题。请参阅 MUI 文档中关于 主题组合的部分。

接下来是什么？

• 请查阅我们的 UI 样式指南。
• 了解如何 发布您的扩展。