覆盖 Antd 选择的 Item 颜色

Question

我想覆盖类的background-color属性ant-menu-item-selected。默认情况下它显示为蓝色。

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'));

我应该怎么做？

感谢您的帮助。

Answer 1

我发现我需要以Ant Design更高的优先级覆盖的属性。首先，我在每个Item元素上定义了一个 CSS 类：

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

然后我添加了 CSS：

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

前面的第一部分customclass是为了获得与 Ant Design 属性相同的优先级。该类customclass只是增加了超越 Ant Design 所需的一点优先级。