MUI 最佳实践

本文假设您使用我们的 Material UI 主题来遵循我们推荐的做法。 按照以下步骤可以最大限度地提高与 Docker Desktop 的兼容性，并最大限度地减少您作为 Docker Desktop 需要执行的工作 扩展作者。它们应被视为对 UI 样式概述中非特定于 MUI 的准则的补充。

假设主题可以随时更改

抵制使用精确的颜色、偏移量和字体大小微调 UI 以使其看起来尽可能有吸引力的诱惑。您今天所做的任何专业化都将与当前的 MUI 主题相关，并且在主题更改时可能会看起来更糟。主题的任何部分都可能在没有警告的情况下发生变化，包括（但不限于）：

• 字体或字体大小
• 边框粗细或样式
• 颜色：
  • 我们的调色板成员（例如 ）可以更改其 RGB 值red-100
  • 语义颜色（例如 、 、 、 等）可以更改为使用调色板的不同成员errorprimarytextPrimary
  • 背景颜色（例如页面或对话框的颜色）可能会发生变化
• 间距：
  • 间距的基本单位的大小，（通过 .例如，我们可以允许用户自定义 UI 的密度theme.spacing
  • 段落或网格项目之间的默认间距

构建 UI 以使其能够抵御未来的主题更改的最佳方法是：

• 尽可能少地覆盖默认样式。
• 使用语义排版。例如，将 s 或 s 与适当的 s 一起使用，而不是直接使用排版 HTML 元素（、、 等）。TypographyLinkvariant<a><p><h1>
• 使用固定尺寸。例如，在按钮或图标上使用，而不是以像素为单位指定大小。size="small"fontSize="small"
• 更喜欢语义颜色。例如，使用 OR 过度明确的颜色代码。errorprimary
• 尽可能少编写 CSS。改为编写语义标记。例如，如果要分隔文本段落，请在实例上使用 prop。如果要分隔其他内容，请使用 或 和默认间距。paragraphTypographyStackGrid
• 使用您在 Docker Desktop UI 中看到的视觉惯用语，因为这些是我们将测试任何主题更改的主要惯用语。

当您进行自定义时，将其集中化

有时，您需要一个在我们的设计系统中不存在的 UI。如果是这样，我们建议您先与我们联系。我们的内部设计系统中可能已经有一些东西，或者我们可能能够扩展我们的设计系统以适应您的用例。

如果您在联系我们后仍然决定自己构建它，请尝试以可重用的方式定义新的 UI。如果您只在一个地方定义自定义 UI，那么将来如果我们的核心主题发生变化，将更容易进行更改。您可以使用：

• 现有组件的新增功能 - 请参阅 MUI 文档variant
• MUI mixin（在主题中定义的可重用样式规则的自由格式捆绑包）
• 新的可重用组件

上述某些选项需要您扩展我们的 MUI 主题。请参阅有关主题组合的 MUI 文档。

下一步是什么？

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