MUI 最佳实践

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

假设主题可以随时更改

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

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

构建 UI 的最佳方法是：

尽可能少地覆盖默认样式。
使用语义排版。例如，使用Typographys 或Links 与适当的variants 一起使用，而不是直接使用印刷 HTML 元素（<a>、<p>、<h1>等）。
使用罐装尺寸。例如，size="small"在按钮或图标上使用fontSize="small"，而不是指定像素大小。
更喜欢语义颜色。例如使用error或primary过度明确的颜色代码。
尽量少写 CSS。而是编写语义标记。例如，如果您想要分隔文本段落，请paragraph在Typography实例上使用 prop。如果您想分隔其他内容，请使用Stack或Grid以及默认间距。
使用您在 Docker 桌面 UI 中看到的视觉习惯用法，因为这些是我们将测试任何主题更改的主要习惯用法。

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

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

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