Question

正如标题所说，我无法在Semantic UI中正确地将自定义颜色应用于菜单。我已经在互联网上搜索了教程，指南，包括语义UI页面。我能找到的唯一的东西是人们能够成功地将自定义颜色应用于按钮，或者使用语义UI为菜单定义的默认颜色的人。

<div class="ui fluid container">
    <div class="ui segment attached">
        <h1 class="ui header item">CONTERACT</h1>
    </div>
</div>
<div class="ui fluid container">
    <div class="ui primary attached four item inverted menu">
        <a href="" class="brand item">Project Name</a>
        <a href="" class="active item">Link</a>
        <a href="" class="item">Link</a>
        <a href="" class="item">Link</a>
    </div>
</div>

我已经将我想要的特定颜色定义为@primaryColor，这适用于按钮，就像实验一样，但在菜单上不起作用。我还尝试覆盖site.override中的默认颜色但没有成功。我怀疑您可能无法在语义UI中使用自定义颜色和菜单，但考虑到失败定制方面，这也很难相信。

    /**
     User Global Variables
**/
@primaryColor: #fabd42

Answer 1

可以找到彩色菜单的文档here，通过查看示例中的源代码，我们可以看到更改颜色时使用的是单用类，例如red使得菜单红色：

<div class="ui red three item menu"></div>

要将red设置为背景颜色（而不是文本颜色），添加inverted类，例如：

<div class="ui red inverted three item menu"></div>

这表明我们需要确定这些一次性颜色类的定义位置并添加我们自己的颜色类。通过GitHub搜索menu inverted orange的源代码，我们可以发现这些内容在menu.less中定义如下：

/* Orange */
.ui.inverted.menu .orange.active.item,
.ui.inverted.orange.menu {
  background-color: @orange;
}
.ui.inverted.orange.menu .item:before {
  background-color: @invertedColoredDividerBackground;
}
.ui.inverted.orange.menu .active.item {
  background-color: @invertedColoredActiveBackground !important;
}

因此，要为菜单添加自己的背景颜色，您需要以相同的方式定义背景颜色类，例如：

/* Peach */
.ui.inverted.menu .peach.active.item,
.ui.inverted.peach.menu {
  background-color: @peach;
}
.ui.inverted.peach.menu .item:before {
  background-color: @invertedColoredDividerBackground;
}
.ui.inverted.peach.menu .active.item {
  background-color: @invertedColoredActiveBackground !important;
}

然后你需要添加peach颜色，可以在site.variables中设置，例如：

/*---  Colors  ---*/
@peach            : #FABD42;

你完成了！您已添加自己的颜色（peach）和使其可用作背景菜单颜色。最后一步是将颜色类与inverted一起添加到菜单中，将其设置为背景颜色，例如：

<div class="ui peach inverted primary attached four item menu">

</div>

无法在语义UI中将自定义颜色应用于Menu

1 个答案: