语义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 {

     边框：纯红色！重要;

     

border-width：2px！important;

     

}

Answer 3

您有两个选择：

1）添加一个普通的CSS类，并使用!important传入您想要的CSS属性，以覆盖现有属性

示例：

.no_similar_to_semantic_class_name{
    color:red !important;
}

在语义UI组件中：

<Button 
   primary
   className="no_similar_to_semantic_class_name"
 >
  Primary
 </Button>

2）使用styled-components

有关覆盖组件here中的现有样式的更多详细信息

Answer 4

另一种可能的解决方案是将应用程序所有样式较少的样式嵌套在应用程序根元素处的唯一ID下。

例如我的情况：

    #__next {

       .is-pink {

          color: pink

       }

      .mb-70 {

        margin-bottom: 70px !important;

       }

    }