CODEWITHSUNDEEP
csssemantic-uireact-css-modules
FrozenKiwi
FrozenKiwi

Reputation: 1513

CSS class applied before internal CSS class and not affecting SemanticUI button

I have a strange problem

I'm trying to style a SemanticUI button, but the button's internal CSS is applied on top of my CSS class, and so none of my stylings are applied.

Note the top style is from semantic.min.css, while the style under it (being overridden) is defined in my own style tag

Style orderings applied to button

Also note: The ordering of the CSS in the header appears to be 'correct', or at least, my custom CSS comes after the SemanticUI import

Header CSS import & local definitions

I'm using SemanticUI React with CSS Modules, if that makes a difference.

How can I get my class applied over the top of semanticUI's button class?

Notice that all my styles from custom class are overridden

Upvotes: 0

Views: 567

Answers (2)

IvanS95
IvanS95

Reputation: 5732

It seems Semantic UI's selector has a higher specificity than yours, as it's selector is .ui.button it has two classes being selected, in contrast your selector is only one class, thus, less specific than the one from Semantic UI's stylesheet, try adding another class, id, or tag being more specific to that element so that your style applies correctly.

So for example, if semantic ui says .ui.button { } you can try .ui.button._31HHf.... { }

[edit]

For React with CSS Modules, we can combine classes with the following:

import styles from './index.module.css';
import cx from 'classnames';
...

      <Button className={cx(
        styles.ui,
        styles.button,
        styles.mainButton
      )}>LEARN MORE</Button>

Upvotes: 2

Rahul
Rahul

Reputation: 4364

based on image you have provided you can use

#app .container .(your highlighted selector)

so it will be for ex

#app .container ._31HHF..{
  color: red;
}

Upvotes: 1

Related Questions