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

Question

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

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

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?

Answer 1

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>