Override Antd's selected Item color

问题

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.

回答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.

回答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.

回答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

回答4:

Overriden property

:host ::ng-deep .ant-menu.ant-menu-light .ant-menu-item-selected {
  border-bottom-color: #4a235a;
}

回答5:

By using :global we can override detail ant design styles

div { // any parent element
  :global {
    .ant-menu-item-selected {
      border-bottom-color: #4a235a;
    }
  }
}

回答6:

If you are overriding the style using a less file, you most likely want to set the correct primary alternatives to affect the selection background color:

@import "~antd/dist/antd.less";
@primary-color: #e42;
@primary-1: rgb(137, 41, 22);
@primary-2: rgb(118, 49, 35);
@primary-5: rgb(94, 51, 42);
@primary-6: #e42;
@primary-7: rgb(255, 120, 93);

来源：https://stackoverflow.com/questions/52283040/override-antds-selected-item-color

标签

css

reactjs

antd