Javascript 如何在ant design中自定义和更改菜单的颜色？

我目前正在使用reactJs和ant design来帮助我建立一个网站。然而，我偶然发现了一个问题。我可以更改菜单的实际颜色，但在选择菜单项或鼠标悬停在菜单项上时，我无法更改菜单项的颜色。这是菜单，我想把白色改成浅绿色，但我还没有找到任何直接访问和更改的方法。而且，我不想用更少的钱来做这件事

有人知道如何解决这个问题吗？这是我的布局代码

import { Layout, Menu, Icon, Row, Button, Col } from 'antd';
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";


const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

class BasicLayout extends React.Component {
  state = {
    collapsed: false,
    path: this.path
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <Layout>
        <Sider className='ant-menu' trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <Menu className='ant-menu' mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" >
              <Link to='/'>
                <Icon type="home" />
                <span>Home</span>
              </Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to='/about'>
                <Icon type="plus" />
                <span>About</span>
              </Link>
            </Menu.Item>
            <SubMenu key="3" title={<span><Icon type="database" /><span>Directory</span></span>}>
                <Menu.Item>
                  <Link to='/resources/living'>
                    <span>Living Resources</span>
                  </Link>
                </Menu.Item>
                <Menu.Item>
                  <Link to='/water2'>
                    <span>Non-Living Resources</span>
                  </Link>
                </Menu.Item>
                <Menu.Item>
                  <Link to='/resources/recycle'>
                    <span>Recycling Resources</span>
                  </Link>
                </Menu.Item>

                <Menu.Item>
                  <Link to='/resources/reducing'>
                    <span>Reducing Resources</span>
                  </Link>
                </Menu.Item>
                <Menu.Item>
                  <Link to='/resources'>
                    <span>General</span>
                  </Link>
                </Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          </Header>
          <Content
            style={{
              margin: '24px 16px',
              padding: 24,
              background: '#fff',
              minHeight: 280,
            }}
          >
            {this.props.children}
          </Content>
        </Layout>
      </Layout>
    );
  }
}
export default BasicLayout;

从“antd”导入{布局、菜单、图标、行、按钮、列}；
从“React”导入React，{Component}
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
const{Header，Sider，Content}=布局；
常量{子菜单}=菜单；
类basiclayot扩展了React.Component{
状态={
错误:，
path:this.path
};
切换=（）=>{
这是我的国家({
崩溃：！this.state.collapsed，
});
};
render（）{
返回(
家
关于
生物资源
非生物资源
回收资源
减少资源
一般的
{this.props.children}
);
}
}
输出默认值；

您需要将链接更改为NavLink并添加属性activeClassName

<NavLink  to="/portoflio" activeClassName="your-active-class" className="link">Portoflio</NavLink>

---

您需要将链接更改为NavLink并添加属性activeClassName

<NavLink  to="/portoflio" activeClassName="your-active-class" className="link">Portoflio</NavLink>

---

如何使用css实现这一点？对不起，我是新来的我更新了我的答案请让我知道如果这对你有效我如何用css做到这一点？对不起，我是新来的我会更新我的答案请告诉我这对你是否有效