覆盖 Antd 选择的 Item 颜色 [英] Override Antd's selected Item color

问题描述

我想覆盖 ant-menu-item-selected 类的 background-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'));

我该怎么办?

感谢您的帮助.

推荐答案

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

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>

然后我添加了 CSS:

Then I added the CSS:

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

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

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.

这篇关于覆盖 Antd 选择的 Item 颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！