首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在Ant Design中更改所选菜单项的颜色?

如何在Ant Design中更改所选菜单项的颜色?
EN

Stack Overflow用户
提问于 2020-11-23 10:13:11
回答 2查看 5.1K关注 0票数 1

在Ant Design中,所选菜单项的默认颜色是蓝色,但我想要更改该颜色。下面是我的一些代码:

代码语言:javascript
运行
复制
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;
代码语言:javascript
运行
复制
.ant-menu.ant-menu-dark .ant-menu-item-selected.customclass {
  background-color: '#B039CC';
} 
代码语言:javascript
运行
复制
<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组件,我必须通过自定义菜单组件访问它)。

EN

回答 2

Stack Overflow用户

发布于 2021-05-01 06:10:00

代码语言:javascript
运行
复制
 .ant-menu-item-selected {
    background-color: #B039CC !important;
  }

添加重要信息

票数 1
EN

Stack Overflow用户

发布于 2020-11-23 13:27:55

你说this方法,它只有当菜单模式是‘水平’时才起作用,因为.ant-menu-horizontal这条语句只匹配horizontal模式...您可以删除单词horizontal,然后再次删除tyr。,如下所示:

代码语言:javascript
运行
复制
.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;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64961752

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档