CODEWITHSUNDEEP
semantic-ui-react
mustang
mustang

Reputation: 161

React Semantic UI and a custom CSS class

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

Upvotes: 1

Views: 4135

Answers (2)

Armando Lambertucci
Armando Lambertucci

Reputation: 1

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.

Upvotes: 0

ph0enix
ph0enix

Reputation: 774

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>

Upvotes: 3

Related Questions