React，当你大量定制样式时，使用UI框架仍然是有益的吗？

Question

例如，material-ui为你提供了材料设计的外观。

当你创建一个网站，它的设计与材料ui无关，使用材料ui作为ui框架是一个明智的选择吗？

我看到ui框架通常有更多的组件，比如侧边栏、导航栏，它们的实现相当繁琐，所以我看到了使用这些框架的好处。

但是我们的团队成员负责将设计应用到react组件，他们认为ui框架往往会导致更多的麻烦来实现他所给出的设计。

有没有一种方法可以利用ui-framework的复杂组件的功能，同时又能以最小的摩擦定制样式？

Answer 1

是的，这是一个合理的问题。遗憾的是，在库组件的功能上投入了如此多的工作，但您却被MaterialUI的外观所束缚。

如果该站点没有被设计为MaterialUI站点(即设计者没有严格遵循MaterialUI设计指南)，那么您的团队成员是正确的，使用MaterialUI组件库可能不是一个好主意。我个人没有听说过任何“清零”库，一般来说，除了调整主题之外，这些库很难定制。

一种更好的方法是使用高质量的独立React组件，这些组件不会强加任何特定的样式，并且可以很容易地定制来实现应用程序的任何复杂部分。有很多好的选择：

适用于dropdowns/typeaheads/autocomplete

• React Burger Menu的
• Downshift适用于sidebars
• React Tiny Popover的工具提示和适用于modals
• Etc

的popovers

• React Modal

Answer 2

Material-UI组件代码的很大一部分与实现Material Design外观相关。虽然样式是高度可定制的，但如果您的目标不是外观至少在某种程度上与Material Design一致，那么如果您需要显著地撤消/覆盖大多数组件的默认样式，那么您可能会为自己创建许多额外的工作。

也就是说，Material-UI组件的构造方式使您能够利用一些较低级别的构建块来创建您自己的组件。例如，InputBase和ButtonBase是用于在Material-UI中创建不同类型的输入和按钮的构建块。

您可以查看https://mui-treasury.com/，了解一些Material-UI组件的重要定制示例。

即使您不利用Material-UI组件("@material-ui/core")，您也可能会发现利用@material-ui/styles和@material-ui/system包来帮助您自己设计样式解决方案仍然有相当大的价值。如果您决定创建自己的组件，您可以使用Material-UI源代码作为有关如何处理特定组件的有用资源。