React 语义 UI 和自定义 CSS class

Question

我有一个项目，我正在使用语义-ui-react。该项目是 built with webpack 并启用了 sassLoader。

我在 React 组件中有以下代码：

<Label className="test">
   sample text
</Label>

我在这个组件加载的 scss 文件中有以下代码：

.test {
    color: red;
}

示例文本未显示为红色。我知道两种可能的解决方案 - 提高特异性或在 CSS 规则之后抛出 important!。我想知道的是 为什么 会发生这种情况。为什么当我使用本机版本的语义时不会发生这种情况 UI?

为了提供帮助，下面是 Chrome 中检查员的屏幕截图：

Answer 1

我相信您实际上已经回答了您自己的问题，在 semantic.css 中语义 UI 使用文件 class 组合 .ui.label 具有预定义颜色 rgb(0,0,0,.6) - 这些是 class es React element Label uses.

因为 .ui.label 比 .test 更具体（2 classes vs 1 class，这是一个惊人的信息图：http://www.standardista.com/css3/css-specificity/)，第一个 class 的颜色参数胜过第二个颜色参数。

我尝试使用 Semantic UI 而没有 React，结果相同。

.test {
   color: red;
}

<div class="ui label test">not a color red</div>

Answer 2

当您使用语义 UI 帮助设置组件样式但它使用 class 与您的 'className' 样式竞争的组合时，这是一个困难的情况，另一方面您需要更大的灵活性并更改一些 CSS，这样您就可以使用其他属性来赢得 class 组合，但它可能会很混乱，我宁愿自定义所有内容，所以我不必处理这个 class竞争。

React 语义 UI 和自定义 CSS class

React Semantic UI and a custom CSS class

semantic-ui-react