Override Antd's selected Item color

Question

I want to override the background-color property of the ant-menu-item-selected class. By default it appears blue.

import { Menu } from 'antd';
const { Item } = Menu;

//item2 will be rendered with the class 'ant-menu-item-selected'
const MyComp = () => (
  <Menu theme="dark" defaultSelectedKeys={["item2"]} mode="horizontal">
    <Item key="item1">Item 1</Item>
    <Item key="item2">Item 2</Item>
  </Menu>
);

ReactDOM.render(<MyComp />,document.getElementById('root'));

How should I do?

Thank you for your help.

Answer 1

I figured out that I needed to override Ant Design's properties with a higher priority. First, I defined a CSS class on each of my Item elements:

<Item key="item1" className="customclass">Item 1</Item>

Then I added the CSS:

.ant-menu.ant-menu-dark .ant-menu-item-selected.customclass {
  background-color: green; /*Overriden property*/
}

The first part before customclass is there to get the same priority than the properties of Ant Design. The class customclass just adds the little bit of priority needed to surpass that of Ant Design.