CSS class 在内部 CSS class 之前应用并且不影响 SemanticUI 按钮

Question

我有一个奇怪的问题

我正在尝试设置 SemanticUI 按钮的样式，但该按钮的内部 CSS 应用在我的 CSS class 之上，因此我的 none已应用样式。

注意上面的样式来自semantic.min.css，而它下面的样式（被覆盖）是在我自己的样式标签中定义的

另请注意：header 中 CSS 的顺序似乎是 'correct'，或者至少，我的自定义 CSS 出现在 SemanticUI 导入之后

我将 SemanticUI React 与 CSS 模块一起使用，如果这会有所不同的话。

如何让我的 class 应用到 semanticUI 按钮 class 的顶部？

Answer 1

根据您提供的图片可以使用

#app .container .(your highlighted selector)

所以它将用于前

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

Answer 2

Semantic UI 的选择器似乎比你的 specificity 更高，因为它的选择器是 .ui.button 它有两个 classes 被选中，相比之下你的选择器只有一个 class，因此，更少 specific 比来自 Semantic UI 的样式表的样式表，尝试添加另一个 class、id 或更具体到该元素的标记，以便您的样式正确应用。

例如，如果语义 ui 说 .ui.button { } 你可以尝试 .ui.button._31HHf.... { }

[编辑]

对于带有 CSS 模块的 React，我们可以将 classes 与以下内容组合：

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

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

CSS class 在内部 CSS class 之前应用并且不影响 SemanticUI 按钮

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

css

semantic-ui

react-css-modules