語義UI自定義ui.menu背景色

Question

我正在嘗試使用主題功能自定義語義ui。

我正在使用語義UI反應。

我在/semantic/src/site/collections/menu.overrides定義了菜單CSS覆蓋，如下所示：

.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類定義更多的特異性，但是不應該根據我較少的代碼來呈現“徽標”項嗎？

我仍然可以更改menu.variables來更改背景顏色（例如@itemBackground: fade(#eb6510, 80%); ），但是我真的想使用純CSS覆蓋默認CSS，以防我想從語義中遷移出來未來的用戶界面。

Answer 1

如果要在semantic-ui主題變量和覆蓋范圍內更改內容，則必須構建新樣式。 簡單地更改覆蓋將無法實現。 現在， semantic-ui-react對CSS不可知。 它只是呈現所需的標記和類。 如果在項目中安裝了semantic-ui和semantic-ui-react ，則需要在構建工具中運行一些gulp腳本。 在這里看看： https : //semantic-ui.com/introduction/build-tools.html#gulp-commands