我正在try 覆盖整个MUI组件,以拥有更多的变体和新的props .

React Example component screenshot: React Example component screenshot

示例如上图所示.我正在寻找一个好的做法,我没有太多的经验与MUI,这是一个好主意, for each 被覆盖的组件创建新的主题?我可以在这个主题对象中使用css变量吗?

推荐答案

不,这不是MUI应该使用的方式.你不应该使用很多不同的主题.

根据经验,你应该为整个应用程序定义one个主题,除此之外,只使用预定义的MUI样式,而不是使用很多自定义样式.

自定义

customize a few components是可以的,这不适合一般的主题,但应该谨慎使用,不能通过不同的主题,而是通过自定义样式或内联样式.

定义more than one theme也是可以的,但这应该很少是必要的.我会说你不应该这么做.

material 设计

如果您发现您需要定制很多东西,那么您可能根本不应该使用MUI.主要用于"material design":

Material UI是一个开源的Reaction组件库,它实现了Google的material 设计.

因此,如果你不想要material 设计,那么这个库可能不适合你.

MIU基地

我刚刚注意到自己有"MIU基地"个,这应该是提供强大的组件而不是样式(所以可能不是基于"material 设计"?).但我自己还不知道"MUI基地".

Css相关问答推荐

CSS Grid,意想不到的差距

通过使溢出的子元素具有其宽度的100%来防止Flex元素溢出

如何在JavaFX中设置分隔符的样式?

为什么 CSS Calc() 函数只需要+或-运算符前后有空格

flex-wrap 导致 children 身高加倍

如何在启动时滚动 div 的底部?

如何在父叠加层之上呈现子子

子菜单的背景不占用所有空间

如何应用适当样式的元素加消息框?

带有图像的 CSS 网格在 Firefox 中表现不同

当我进入登录页面时,它处于桌面模式(响应式设计消失)

基于类的 CSS Select 器

Rails 7引擎如何使未编译的样式表可用于托管应用程序?

Div Size 自动调整内容大小

为什么 .class:last-of-type 不能按我的预期工作?

如何强制显示垂直滚动条?

CSS3 box-shadow:inset 可以只做一侧或两侧吗?喜欢边界顶部?

如何在 Firefox 和 Opera 中zoom HTML 元素?

Unicode 通过 CSS :before

如何将文本与图标字体垂直对齐?