语义UI -更改组件样式(覆盖组件css)

cvxl0en2 于 2023-02-10 发布在其他

关注(0)|答案(3)|浏览(173)

我正在尝试改变一些语义UI组件的风格。我创建了一个css文件，并一直在修改那里的参数。然后我注意到所有组件css文件（在语义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>

知道为什么没成功吗？

css

来源：https://stackoverflow.com/questions/29603741/semantic-ui-change-component-styles-override-components-css

3条答案

按热度按时间

2izufjch1#

您需要在 *src/site/elements/header.overrides文件 * 中添加您的覆盖CSS样式并运行gulp build命令。
如果“gulp watch”已在运行，则在检测到上述文件中的变更时将自动运行构建任务。

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

赞(0）回复(0）举报 2023-02-10

qlckcl4x2#

请尝试在""中包含"! important"";'在您的代码中，
. ui.标头{
边框：纯红色!重要;
边框宽度：2px!重要;
}

赞(0）回复(0）举报 2023-02-10

carvr3hs3#

另一种可能的解决方案是将应用程序的所有较低样式嵌套在app.

的根元素处使用的唯一id下
以我自己为例：

#__next {

       .is-pink {

          color: pink

       }

      .mb-70 {

        margin-bottom: 70px !important;

       }

    }

赞(0）回复(0）举报 2023-02-10

我来回答

语义UI -更改组件样式(覆盖组件css)

3条答案

相关问题

热门标签

最新问答