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 文档。

下一步是什么？

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