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，那么如果我们的核心主题发生变化，将来就更容易更改它。您可以使用

  • 现有组件的新变体 - 请参阅MUI 文档
  • 一个 MUI mixin（在主题内定义的可复用样式规则的自由格式捆绑包）
  • 一个新的可复用组件

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

下一步是什么？