语义UI自定义ui.menu背景色

Question

我正在尝试使用主题功能自定义语义ui。

我正在使用语义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类定义更多的特异性，但是'logo'项目是否应该根据我的代码较少呈现？

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

Answer 1

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