在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组件,我必须通过自定义菜单组件访问它)。
发布于 2021-05-01 06:10:00
.ant-menu-item-selected {
background-color: #B039CC !important;
}
添加重要信息
发布于 2020-11-23 13:27:55
你说this方法,它只有当菜单模式是‘水平’时才起作用,因为.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;
}
https://stackoverflow.com/questions/64961752
复制相似问题