In Ant Design, the default color of a selected menu item is blue, but I want to change the color. 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=".8.5/antd.min.js"></script>
<script src=".6.3/umd/react.production.min.js"></script>
<script src=".6.3/umd/react-dom.production.min.js"></script>

In Ant Design, the default color of a selected menu item is blue, but I want to change the color. 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'.

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).

• javascript
• css
• reactjs
• antd

5 Answers 5

 .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 horizontalmode... you can remove the word horizontal,and tyr again.,like this:

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

the correct way of changing that color would be to add it in the global theme provided by antd.

export const appTheme: ThemeConfig = {
  algorithm: [defaultAlgorithm],
  token: {
     ...
  },
  components: {
    Menu: {
      colorItemBgHover: "#...",
      colorItemBgSelected: "#...",
      colorItemTextSelected: "#...",
    },
  },
};

It works for me thank you. more details here

/* Change text color of all menu items */
.ant-menu-item-selected {
    background-color: #f80000 !important
}

You can use :global to inject the .ant-menu-item-selected and then add !important to your property.

example:

:global(.ant-menu-item-selected) {
  background-color: #ff0000 !important; /* Change to your desired color */
}