1

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:

enter image description here

mustang
  • 151
  • 3
  • 9
  • you can use styled components look [here](https://stackoverflow.com/a/53078645/2813359) – xargr Oct 31 '18 at 07:57

2 Answers2

3

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>
ph0enix
  • 763
  • 2
  • 8
  • 23
  • 1
    It took me a second but I now get it. When I use the react wrapper, the "ui" and "label" classes aren't being brought along so because of specificity rules, the default wins. If I don't use the react wrapper, I'm appending my class to the "ui" and "test" classes and that's what gets rendered. – mustang Nov 08 '17 at 04:19
0

Thats a difficult situation when you have Semantic UI helping styling your components but it uses class combination that compete with your 'className' styles, on the other hand you need more flexibility and change some CSS, so you can use other properties to win the class combination, but It could be messy, i`d rather custom everything so I dont have to deal with this class competition.

Armando Lambertucci
  • 1
  • 1