React Semantic UI和自定义CSS类

Question

我有一个项目，我正在利用语义 - 反应。该项目使用webpack构建，并启用了sassLoader。

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

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

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

.test {
    color: red;
}

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

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

Answer 1

我相信你几乎回答了你自己的问题，在 semantic.css 语义UI使用文件类组合 .ui.label 具有预定义颜色 rgb（0,0,0，.6） - 这些是React元素标签使用的类。

由于 .ui.label 比 .test 更具体（2个班级与1个班级，这里有一个关于此的惊人信息图：http://www.standardista.com/css3/css-specificity/），第一类的颜色参数胜过第二个颜色参数。

我尝试使用Semantic UI并且没有React，并且发生了相同的结果。

.test {
   color: red;
}

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

Answer 2

当您具有语义UI来帮助设计组件样式，但是它使用可与“ className”样式竞争的类组合时，那是一个困难的情况，另一方面，您需要更大的灵活性并更改某些CSS，因此可以使用其他属性来赢得了班级组合，但这可能很麻烦，我宁愿自定义所有内容，因此我不必处理此类比赛。