Класс CSS, примененный перед внутренним классом CSS и не влияющий на кнопку SemanticUI

Question

У меня странная проблема

Я пытаюсь стилизовать кнопку SemanticUI, но внутренний CSS-код кнопки применяется поверх моего класса CSS, и поэтому ни один из моих стилей не применяется.

Обратите внимание, что верхний стиль взят из semantic.min.css, а стиль под ним (переопределяемый) определен в моем собственном теге стиля

Также обратите внимание: порядок CSS в заголовке выглядит «правильным», или, по крайней мере, мой пользовательский CSS появляется после импорта SemanticUI

Я использую SemanticUI React с модулями CSS, если это имеет значение.

Как я могу применить свой класс поверх класса кнопок semanticUI?

Answer 1

Кажется, что селектор Semantic UI имеет специфичность , чем у вас, так как его селектор .ui.button, у него выбрано два класса, в отличие от вашего селектора только один класс, таким образом, менее специфичный , чем класс из таблицы стилей семантического пользовательского интерфейса, попробуйте добавить другой класс, идентификатор или тег, более специфичный для этого элемента, чтобы ваш стиль применялся правильно.

Так, например, если семантический пользовательский интерфейс говорит .ui.button { }, вы можете попробовать .ui.button._31HHf.... { }

[править]

Для React с модулями CSS мы можем комбинировать классы со следующим:

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

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

Answer 2

на основе предоставленного вами изображения вы можете использовать

#app .container .(your highlighted selector)

, так будет и для бывшего

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