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

Question

我有一个奇怪的问题

我正在尝试设置 SemanticUI 按钮的样式，但该按钮的内部 CSS 应用在我的 CSS 类之上，因此我的所有样式均未应用。

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

另请注意: header 中 CSS 的顺序似乎是“正确的”，或者至少，我的自定义 CSS 在 SemanticUI 导入之后出现

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

如何让我的类应用到 semanticUI 的按钮类之上？

Answer 1

Semantic UI 的选择器似乎有更高的 specificity比你的，因为它的选择器是 .ui.button 它选择了两个类，相比之下你的选择器只是一个类，因此，不太具体 与语义 UI 样式表中的样式表相比，尝试添加另一个类、ID 或标签更具体到该元素，以便正确应用您的样式。

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

[编辑]

对于 React with CSS Modules，我们可以将类与以下内容组合:

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

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