如何在 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 文件中，您可以看到我正在尝试 this 解决方案，但奇怪的是，它仅在菜单模式为“水平”时才有效。

我还尝试了this 方法，在该方法中我创建了自定义菜单组件并覆盖了 ant-menu-item-selected 属性，但这也不起作用（我认为这是因为我还需要使用 Item 组件，我必须使用我的自定义菜单组件访问）。

Answer 1

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

添加重要的

Answer 2

你说this方法，它只在菜单模式为'horizo​​ntal'时才有效，因为.ant-menu-horizontal this语句只匹配horizontalmode... 您可以删除单词horizontal，然后再次删除。，像这样：

.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;
}