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 文档中关于 主题组合 的内容。

下一步是什么？

页面选项