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.

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

Solution 2

.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected {
  color: red;
  border-bottom: 2px solid red;
}

It's working for me!! Great, Thank God.

Solution 3

On the documentation of And-Design You have an option called : style

Inside you can put all you want like style={{ backgroundColor: 'red' }} for example. You can make an hover effect also inside a style attribute.

How can use a style attribute if I don't know witch items are active ?

Very simple, with React you have a state management you could set a key like isActive when item is selected you apply style what you want and if it not true, you apply nothing.

And for knowing witch items are selected, you have a props with Ant-D his called onSelect

Please check this link : ANT DESIGN

Solution 4

By doing so much research I found that we can use the @emotion/styled package to override Antd's selected Item color(::: You can add @emotion/styled using command yarn add @emotion/styled or npm install @emotion/styled )

const CustomMenu = styled(Menu)`

&& .ant-menu-item-selected {

background-color: #000000;

} } `

View more solutions

Comments

[JacopoStanchi]

But I cannot use this as I don't know in advance which Item will be selected (and on which Item I must put the style).

[KolaCaine]

Ok I see what you mean, you can set a state at true when item is selected, and you style props you can check if the state are true or not and if it's true, you can set this style and if it false, you can set nothing.

[JacopoStanchi]

But how would you achieve to know which element is selected without some hideous code that queries the list of items to know which one has the ant-menu-item-selected class?

[JacopoStanchi]

I really appreciate your help but I solved my problem another way. I posted my answer below, feel free to point out my mistakes if I made some.

[sɐunıɔןɐqɐp]

From Review: Hi, please don't answer just with source code. Try to provide a nice description about how your solution works. See: How do I write a good answer?. Thanks

[codeAndStuff]

this. right here. and if you want to disable selected menu item highlighting (which should be a feature built in....) you can just do this and set background-color: transparent

[AhmetEnesKCC]

I used @emotion/react with Global and css and override li.ant-menu-item query. You can inspect query via developer tools.

[Benjamin Roberts]

Perfect!! , thanks so much, why this is not upvoted i do not know. Far better than altering the stylesheet because it can be added dynamically