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

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

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


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

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

！重要信息

，但它也不起作用

我试过这样的方法：

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

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

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

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

这是一个标题

---

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

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

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

---

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

尝试包括'！重要的“内”在这样的代码中

.ui.header{

边框：纯红！重要

边框宽度：2px！重要

}

---

另一个可能的解决方案是将所有应用程序的较少样式嵌套在一个唯一的id下，该id用于应用程序的根元素

例如，在我自己的案例中：

    #__next {

       .is-pink {

          color: pink

       }

      .mb-70 {

        margin-bottom: 70px !important;

       }

    }

---

您是否使用相同的选择器？您需要使用equal（如果CSS位于默认样式之后，则有效）或更强大的选择器来覆盖默认样式。是的，我使用的是完全相同的选择器。我一直在寻找，我已经删除了一些原始语义用户界面zip的文件夹，因为我觉得它们将是无用的。我打赌这个问题是因为那些丢失的文件夹造成的（只是猜测，需要尝试）。如果你删除了一些必要的内容，你可以查看浏览器中的控制台日志，这些日志可能会报告404未找到，这样你就可以知道你需要哪些文件。以防我用“干净”测试了上面的示例语义UI压缩文件夹。它也不起作用。好吧，我已经尝试过覆盖默认的标题样式，它对我来说是有效的（没有！重要），但是你是否可能包括semantic.min.css，并且你所有的编辑都在semantic.css中？Gulp与这里有什么关系？