React Semantic UI and a custom CSS class

Question

I have a project where I'm making use of semantic-ui-react. The project is built with webpack and has the sassLoader enabled.

I have the following code in React component:

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

I have the following code in a scss file that is loaded by this component:

.test {
    color: red;
}

The sample text does not appear red. I know the two possible solutions - up the specificity or throw an important! after the CSS rule. What I'd like to know is why this is happening. Why does this not happen when I use the native version of Semantic UI?

To assist, here's a screenshot from the inspector in Chrome:

Answer 1

I believe you practically answered your own question, in semantic.css that Semantic UI uses file class combination .ui.label has a predefined color rgb(0,0,0,.6) - these are the classes React element Label uses.

Since .ui.label is more specific than .test (2 classes vs 1 class, here is an amazing infographic about this: http://www.standardista.com/css3/css-specificity/), the color parameter of the first class trumps the second color parameter.

I tried this with Semantic UI and without React and the same result occurred.

.test {
   color: red;
}

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