语义 UI 自定义 ui.menu 背景颜色答案

【问题标题】：Semantic UI customize ui.menu background color语义 UI 自定义 ui.menu 背景颜色
【发布时间】：2018-06-26 02:59:21
【问题描述】：

我正在尝试使用它的主题功能自定义语义用户界面。

我正在使用语义 UI 反应。

我定义了我的菜单 css 覆盖 /semantic/src/site/collections/menu.overrides如下：

.ui.menu.item {
  color: fade(#eb6510, 80%); !important;
  background: black !important;
}

我的菜单组件很简单：

<Menu>
  <Menu.Item as={NavLink} exact to="/" name="logo" activeclassname="active"/>
  <Menu.Item as={NavLink} exact to="/menu"  name="Menu" activeclassname="active"/>
    <Menu.Menu position="right">
      <Menu.Item as={NavLink} exact to="/login" name="Log in" activeclassname="active"/>
      <Menu.Item as={NavLink} exact to="/register" name="Sign up" activeclassname="active"/>
   </Menu.Menu>
</Menu>

但它仍然呈现为默认主题：

这是元素检查的屏幕截图：

我做错了什么？

我可能需要为active 类和right 类定义更多特异性，但不应该根据我的less 代码呈现'logo' 项吗？

我仍然可以更改 menu.variables 以更改背景颜色（例如，@itemBackground: fade(#eb6510, 80%);），但我真的想使用纯 css 来覆盖默认 CSS，以防将来我想从 Semantic UI 迁移出来。

【问题讨论】：

标签： css less semantic-ui semantic-ui-react

【解决方案1】：

如果您要更改 semantic-ui 主题变量和覆盖中的内容，则必须构建新样式。简单地改变覆盖是行不通的。现在 semantic-ui-react 对 css 是不可知的。它只是呈现所需的标记和类。如果您在项目中安装了semantic-ui 和semantic-ui-react，则需要在构建工具中运行一些gulp 脚本。看这里：https://semantic-ui.com/introduction/build-tools.html#gulp-commands

【讨论】：