リアクションSemantic UIとカスタムCSSクラス

Question

私はsemantic-ui-reactを利用しているプロジェクトを持っています。プロジェクトはwebpackで構築され、sassLoaderが有効になっています。

.test { 
    color: red; 
} 

サンプルテキストが赤く表示されません。私はこのコンポーネントによってロードされたSCSSファイルに次のコードを持っている

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

：

私は次のコードを持っているコンポーネントに反応します。私は2つの可能な解決策を知っています - 特異性を高めるか、CSSルールの後にimportant!を投げます。私が知りたいのはなぜこれが起こっているのですか？セマンティックUIのネイティブバージョンを使用すると、これはなぜ発生しませんか？

支援するためには、ここでChromeのインスペクタからのスクリーンショットです：

Answer 1

私はセマンティックUIは、ファイルクラスの組み合わせ を使用していることをあなたは事実上semantic.cssに、あなた自身の質問に答えたと信じています。 ui.labelは、定義済みの色を持っていますrgb（0,0,0、.6） - これらはReact要素のクラスですラベルを使用しています。

.ui.labelは.TESTより特異的であるので、（2クラス対1クラス、ここではこれについて驚くべきインフォグラフィックである：http://www.standardista.com/css3/css-specificity/）、第1のクラスの色パラメータは、第二の色パラメータを切り札。

私はSemantic UIでこれを試しましたが、Reactなしで同じ結果が発生しました。

.test { 
    color: red; 
} 

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