无法将自定义颜色应用于语义 UI 中的菜单

Question

正如标题所说，我无法正确地将自定义颜色应用于语义 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

彩色菜单的文档可以在这里找到，通过查看示例中的源代码，我们可以看到要更改颜色，使用了一次性类，例如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>