Класс 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;
}