[英]How do I change the color of selected menu item in Ant Design?
In Ant Design, the default color of a selected menu item is blue, but I want to change the color.在 Ant Design 中,所选菜单项的默认颜色是蓝色,但我想更改颜色。 Here's some of my code:
这是我的一些代码:
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>
In the css file you can see me attempting this solution but weirdly it only works if the menu mode is 'horizontal'.在 css 文件中,您可以看到我正在尝试此解决方案,但奇怪的是,它仅在菜单模式为“水平”时才有效。
I also tried this method, in which I created my custom Menu component and overrode the ant-menu-item-selected property but that did not work either (i think it's because I also need to use the Item component, which I have to access using my custom Menu component).我也尝试过这种方法,在该方法中我创建了自定义菜单组件并覆盖了 ant-menu-item-selected 属性,但这也不起作用(我认为这是因为我还需要使用 Item 组件,我必须访问它使用我的自定义菜单组件)。
.ant-menu-item-selected {
background-color: #B039CC !important;
}
add important添加重要的
You say this method , it only works if the menu mode is 'horizontal', beacause .ant-menu-horizontal
this statement only matches the horizontal
mode... you can remove the word horizontal
,and tyr again.,like this:你说这个方法,它只在菜单模式是'horizontal'时才有效,因为
.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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.