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

【问题标题】：Semantic UI - change component styles (override components css)语义 UI - 更改组件样式（覆盖组件 css）
【发布时间】：2015-04-13 11:01:40
【问题描述】：

我正在尝试更改一些语义 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>

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

【问题讨论】：

您使用的是相同的选择器吗？您需要使用 equal（如果您的 CSS 放在默认值之后有效）或更强的选择器来覆盖默认样式。
是的，我使用的是完全相同的选择器。我正在寻找并且我已经删除了原始语义 UI zip 的一些文件夹，因为我觉得它们将毫无用处。我打赌问题是由于那些缺少文件夹引起的（只是猜测，需要尝试）。
如果您删除了一些必要的内容，您可以查看浏览器中的控制台日志，这些日志可能会报告 404 Not found，这样您就可以确定您删除了哪些文件需要。
以防万一我用“干净的”语义 UI zip 文件夹测试了上面的示例。它也没有用。
好的，我已经尝试过覆盖默认标题样式，它对我有用（没有 !important），但是您是否可能包含了 semantic.min.css 和你所有的编辑都在 semantic.css ?

标签： css semantic-ui

【解决方案1】：

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

如果“gulp watch”已经在运行，那么它会在检测到上述文件的变化时自动运行构建任务。

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

【讨论】：

Gulp 与这里的任何事情有什么关系？

【解决方案2】：

尝试在 ';' 中包含 '!important'在你这样的代码中，

.ui.header {

边框：纯红色！重要；

边框宽度：2px !important;

}

【讨论】：

【解决方案3】：

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

以我自己为例：

    #__next {

       .is-pink {

          color: pink

       }

      .mb-70 {

        margin-bottom: 70px !important;

       }

    }

【讨论】：