语义 UI - 更改组件样式（覆盖组件 css）

Question

我正在尝试更改一些语义 ui 组件的样式。我创建了一个 css 文件，并且一直在更改其中的参数。然后我注意到所有组件 css 文件（在 Semantic UI 文件夹中）末尾都有以下代码：

/*******************************
         Theme Overrides
*******************************/


/*******************************
         Site Overrides
*******************************/

我已将代码从 css 文件复制粘贴到组件 css 文件的底部，但样式未更新/覆盖。我尝试使用

!important

，但也没有成功。

我尝试过这样的事情：

/*******************************
         Theme Overrides
*******************************/

.ui.header {
  border: solid red; !important
  border-width: 2px; !important
}

我希望这个元素周围有红色边框

<div class="ui small header">This is a header</div>

知道为什么它不起作用吗？

Answer 1

您需要在 src/site/elements/header.overrides 文件中添加覆盖的 CSS 样式并运行 gulp build 命令。

如果“gulp watch”已经在运行，那么它将自动运行构建任务来检测上述文件中的更改。

存在 src/site 文件夹，用于覆盖所选主题引入的任何样式。

Answer 2

尝试在“;”中包含“!important”在你的代码中，

.ui.header {

边框：纯红色！重要；

边框宽度：2px！重要；

}

Answer 3

另一种可能的解决方案是将应用程序的所有 less 样式嵌套在一个唯一的 id 下，在应用程序的根元素中使用。

以我自己为例：

    #__next {

       .is-pink {

          color: pink

       }

      .mb-70 {

        margin-bottom: 70px !important;

       }

    }