了解如何自定义 MUI 可能会使您的 UI 开发更加紧张
了解如何自定义 MUI 可能会使您的 UI 开发更加紧张
为什么以及如何做
在构建 React 应用程序时，使用预制组件库可以节省大量时间（和金钱）。有许多类型的库可用，范围和功能各不相同，从单个组件到处理与构建用户界面相关的大部分方面的大型实体。长久以来，我的选择是 人机界面 这代表了一个更全面的解决方案。这种全面性也带来了一个问题。当一切都预先构建时，如何自定义外观以满足您的需求？
我知道，基于谷歌的材料设计，该库主要是因为它的外观和感觉而存在分歧。这种默认外观可能会吓跑很多开发人员，因为对其进行更改可能看起来很费力。实际上，可以很容易地更改 MUI 的外观，但必须正确执行。
一旦您学会了如何进行这些自定义，MUI 就会成为一个非常强大的工具，可以真正让您的 UI 开发更加高效。在本文中，我将尽力帮助您。
为什么选择 MUI？
对我来说，使用 MUI 库的原因不是外观，而是库的全面性。如果使用得当，您不必担心从响应性到小的对齐细节的任何事情。因此，最显着的好处不仅是您不必构建组件，而且在宏观层面上易于对齐。
另一个巨大的好处是沟通。如今，我更多地参与到设计过程中，使用 MUI 给了我很大的设计自由度。我可以相信，当我们的开发人员正确使用该库时，将处理有关视觉效果和可用性的最关键方面（如间距、响应性、动画、过渡和层次结构）。它有时消除了对像素完美设计的需求，并使团队之间的沟通更加轻松。这允许将宝贵的设计和开发时间花在构建功能上，而不是为琐碎的问题而苦苦挣扎。
为了使用 MUI 成功开发，参与从设计到开发的开发过程的每个人都应承诺：
- 了解所选图书馆和设计系统的工作原理，以便将其用作事实来源
- 学习自定义组件功能和外观的限制和方法
但这可能并不总是最好的解决方案
在某些情况下，使用预制组件库可能只会减慢您的速度或会产生大量额外的工作。通常随着产品的进一步发展和实施团队的成熟，对预制库的需求会减少。那么您是否正在使用现有的产品或产品系列？或者你身边有一个非常强大和成熟的团队？如果是这样，可能需要仔细检查对 MUI 的需求。
在做出选择时，这些问题可能有助于确定是否应将 MUI 引入开发过程：
- 您是否拥有真正与众不同的独特用户界面？
- 您是否需要将您的 UI 外观与现有应用程序相匹配？
- 您是否需要对组件级行为进行强有力的控制？
- 您的开发团队能否使用 MUI 有效地工作，还是他们更喜欢其他解决方案或工作方式？
如何定制
如果您的客户给了您他们的视觉指南，并且您注意到更改排版和颜色还不够，请不要担心。我在下面列出了不同级别的自定义，它们可以为您提供所需的外观，而不会失去您对 CSS 的理智。
当您开始定制时，您的订单应该是这样的：
- 主题化
- 组件级别覆盖
- 自定义变体
- 一次性定制
1. 主题化
您可以只使用主题而不需要任何覆盖来进行许多自定义。查看 MUI 是否可以根据您的需要进行定制的一个好方法是使用下面的主题创建器。它将 MUI 主题设置到了极限，但如果您正在寻找的自定义在主题创建者中不可用，这意味着您可能必须在组件级别或重写。
[
Material UI 主题创建者
使用自定义主题开始您的下一个伟大的 Material-UI 项目。
bareynol.github.io
](https://bareynol.github.io/mui-theme-creator/)
我建议尝试在根级别更改边框半径和字体是多么容易，以及它如何影响整体外观。以下是主题创建者的示例，显示了小型主题可以产生的重大影响。没有其他样式应用于 MUI 组件。
Change in appearance with minimal theming
2. 组件级覆盖
如果您没有通过主题获得所需的视觉外观，则必须使用覆盖。样式的覆盖通常在组件级别进行。您可以使用组件的默认道具，例如，全局禁用所有选定组件的波纹，或者您可以使用 CSS 进行自己的自定义。
Font-size override to the button component
您也可以使用 sx-prop 进行主题覆盖，即使它在 Material UI v5 中仍然被认为是实验性的，同时直接在主题对象中使用。
Overriding with sx-prop
3.现有组件的自己的变体
有时，您会通过主题化或覆盖来获得想要的组件外观，但您觉得您需要一个不同样式的组件来替代某些组件。您可以创建自己的组件变体，而不是每次需要这种替代外观时都进行一次性定制。通过这样做，您不必牺牲任何组件自己的变体。
A custom variant of the button component
4. 一次性定制样式
如果您遇到只需要自定义某些组件一次的情况，最好的解决方案是使用 sx-道具 . sx-prop 是定义自定义样式并访问主题的快捷方式。
使用 sx-prop，您还可以访问嵌套的组件样式。 Material UI 注入到 DOM 的样式依赖于类名 遵循标准模式 ： [hash]-Mui[组件名称]-[插槽名称] . 这些类名是不稳定的，所以你不应该将它们用作 CSS 类。
Slider classes from MUI documentation
在滑块的情况下，样式应用于 .css-ae2u5c-MuiSlider-thumb 但你只需要真正瞄准 .MuiSlider-拇指 ， 在哪里 滑块 是组件和 拇指 是插槽。使用这个类名在 sx 道具 ( & .MuiSlider-拇指 )，并添加您的覆盖。
Slider code example from MUI documentation
结论
在学习了这些关于自定义 MUI 的基本原则之后，为您的项目提供您想要的外观而不是 Material UI 样式并不难。此外，该库在定制方面也有了很大的改进。这并没有改变 MUI 的学习曲线非常陡峭的事实，如果使用不当，可能会导致项目混乱，其中包含许多覆盖和可疑的 CSS 规则。
但是，MUI 的构建遵循 google 的 Material Design。如果这不是您正在寻找的视觉外观，您将始终需要进行一些定制或寻找其他解决方案。幸运的是，MUI 团队正在开发一个名为 JOY 的新设计系统。
喜悦
MUI 的 Material UI 背后的团队已经开始开发一个名为 JOY 的新系统。基本思想是提供一个具有所有 MUI 功能的系统，使快速开发变得容易，但没有 Material Design 的外观和感觉。因此，您所有关于主题和定制的知识都不会浪费。你只是有一个主题的起点，一切看起来都不像 Material UI。
[
先看Joy UI - MUI
如果您是所有 MUI 的忠实追随者，您可能知道我们一直在开发新的设计系统。如果…
米网
](https://mui.com/blog/first-look-at-joy/)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
