MUI 最佳实践

目录

本文假设您按照我们推荐的做法，使用我们的 Material UI 主题. 按照以下步骤可以最大程度地与 Docker Desktop 兼容，并最大程度地减少您作为扩展作者需要完成的工作。 这些步骤应被视为对 UI 样式概述 中找到的非 MUI 特定指南的补充。

假设主题随时可能更改

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

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

构建 UI 的最佳方法是，使其能够在未来的主题更改中保持稳定，方法是

  • 尽可能少地覆盖默认样式。
  • 使用语义排版。 例如，使用 Typography 或 Link 的适当 variant，而不是直接使用排版 HTML 元素（<a>、<p>、<h1> 等）。
  • 使用预定义大小。 例如，在按钮上使用 size="small"，或在图标上使用 fontSize="small"，而不是以像素为单位指定大小。
  • 优先使用语义颜色。 例如，使用 error 或 primary，而不是显式颜色代码。
  • 尽可能少地编写 CSS。 相反，编写语义标记。 例如，如果要使文本段落之间留出间距，请在 Typography 实例上使用 paragraph 属性。 如果要使其他内容之间留出间距，请使用带有默认间距的 Stack 或 Grid。
  • 使用您在 Docker Desktop UI 中看到过的视觉惯例，因为这些是我们测试任何主题更改的主要惯例。

自定义时，请集中管理

有时您需要一个我们的设计系统中不存在的 UI 元素。 如果是这种情况，我们建议您首先与我们联系。 我们可能已经在我们的内部设计系统中拥有它，或者我们可能能够扩展我们的设计系统以适应您的用例。

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

  • 现有组件的新 variant - 请参阅 MUI 文档
  • MUI 混合器（在主题内部定义的、可重用样式规则的自由格式捆绑包）
  • 新的 可重用组件

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

下一步是什么？