React语义UI

Question

我在使用React (http://react.semantic-ui.com/)的语义Ui来样式化React组件时遇到了一个问题。我知道我可以修改语义UI的样式核心，我做到了，但是有时我想把我自己的样式放到他们的组件中。

我真的很想在定义类名时使用BEM方法CSS命名约定。

举个简单的例子，我有一个<Menu />组件，我想改变它的背景，所以我将添加一个<Menu className="menu-header">类，.menu-header类有不同的背景颜色属性。

重点是，我不能在没有!important的情况下修改它，因为语义UI具有更高的优先级(它们获取更具体的元素，只有很少的类，而不是像我想要的那样)。所有的样式都被webpack捕获了，并且我的.menu-header样式在bundle.js - webpack输出的底部，比语义UI的低。.menu-header类被直接导入到我的新组件中，它使用了webpack中的CSS loader的<Menu className="menu-header">示例。

在这种情况下我能做些什么？

我的想法是，我可以修改语义ui的核心，改变那里的一切，但这不能解决我的问题。每当我想要再次修改某些东西时，我就不得不使用!important --我不喜欢它。

我意识到react内联js样式具有最高的优先级，它覆盖了语义ui样式，但它比我正在使用的less样式稍微复杂一些，我不确定在像我想要开发的这样大的应用程序中，它是否是一个好方法。

Answer 1

我认为在语义ui中使用!important应该被贴上错误的标签。我也遇到过类似的问题，最简单的解决方法就是使用内联样式。

您可能可以使用像react css modules这样的工具来帮助您完成这项任务。

Answer 2

我认为这是不可能的。有人需要在BEM中重写语义ui。

我个人不会使用它，除非它在BEM/SASS中，我想还有很多其他的。