我在使用 React 的语义 Ui ( http://react.semantic-ui.com/ )为 React 组件设置样式时遇到问题。我知道我可以修改 Semantic UI 的样式 Core，但有时我想将自己的样式放入它们的组件中。
我真的很想在定义类名时使用 BEM 方法 CSS 命名约定。
简短的例子，我有<Menu />组件，我想改变它的背景，所以我会添加一个类<Menu className="menu-header">，.menu-header 类具有不同的背景颜色属性。
关键是，如果没有 ，我无法修改它!important，因为语义 UI 具有更高的优先级（它们正在抓取更具体的元素，几乎没有我想要的类）。所有样式都被 webpack 捕获，我的.menu-header样式位于 bundle.js 的底部 - webpack 输出，低于语义 UI。该类.menu-header被直接导入到我的新组件中，该组件使用<Menu className="menu-header">webpack 中 CSS 加载器的示例。
在这种情况下我能做什么？
我的想法是我可以修改语义 ui 的核心，改变那里的一切，但这并不能解决我的问题。每当我想再次修改某些东西时，我都必须使用!important- 我不喜欢它。
我意识到 react 内联 js 样式具有最高优先级，它会覆盖语义 ui 样式，但它比我使用的 less 稍微复杂一些，我不确定在像一个我想开发的。