如何在 Ant Design 中更改所選菜單項的顏色？

Question

在 Ant Design 中，所選菜單項的默認顏色是藍色，但我想更改顏色。 這是我的一些代碼：

 import React from 'react'; import { BrowserRouter as Router, Switch, Route, NavLink, } from 'react-router-dom'; import { Layout, Menu } from 'antd'; import Create from './Create'; import Dashboard from './Dashboard'; import './layout.css'; const { Header, Footer, Sider, Content } = Layout; const { Item } = Menu; function LayoutPage() { return ( <Router> <Layout style={{ minHeight: '100vh' }}> <Sider> <Menu theme='dark' defaultSelectedKeys={['item1']} mode='inline' > <Item key='item1' className='customclass'> <NavLink to='/'> <span>Dashboard</span> </NavLink> </Item> <Item key='item2' className='customclass'> <NavLink to='/create'> <span>Create</span> </NavLink> </Item> </Menu> </Sider> <Layout> <Header style={{ padding: 0, background: '#EBF1FC' }} /> <Content style={{ padding: 24, background: '#EBF1FC', minHeight: 280, }} > <div style={{ padding: 24, background: '#EBF1FC', minHeight: 360 }}> <Switch> <Route exact path='/'> <Dashboard /> </Route> <Route path='/create'> <Create /> </Route> </Route> </Switch> </div> </Content> </Layout> </Layout> </Router> ); } export default LayoutPage;

 .ant-menu.ant-menu-dark .ant-menu-item-selected.customclass { background-color: '#B039CC'; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.8.5/antd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在 css 文件中，您可以看到我正在嘗試此解決方案，但奇怪的是，它僅在菜單模式為“水平”時才有效。

我也嘗試過這種方法，在該方法中我創建了自定義菜單組件並覆蓋了 ant-menu-item-selected 屬性，但這也不起作用（我認為這是因為我還需要使用 Item 組件，我必須訪問它使用我的自定義菜單組件）。

Answer 1

 .ant-menu-item-selected {
    background-color: #B039CC !important;
  }

添加重要的

Answer 2

你說這個方法，它只在菜單模式是'horizo​​ntal'時才有效，因為.ant-menu-horizontal這個語句只匹配horizontal模式......你可以刪除horizontal這個詞，然后再次tyr。，像這樣：

.ant-menu > .ant-menu-item:hover,
.ant-menu > .ant-menu-submenu:hover,
.ant-menu > .ant-menu-item-active,
.ant-menu> .ant-menu-submenu-active,
.ant-menu > .ant-menu-item-open,
.ant-menu> .ant-menu-submenu-open,
.ant-menu > .ant-menu-item-selected,
.ant-menu > .ant-menu-submenu-selected {
  color: red;
  border-bottom: 2px solid red;
}