如何在 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;
}