覆盖Antd的选定项目颜色 [英] Override Antd's selected Item color
本文介绍了覆盖Antd的选定项目颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想覆盖 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:
.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的选定项目颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文