我想覆盖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'));
我应该怎么做?
谢谢您的帮助。
关于And-Design
的文档您有一个名为:style
的选项
在里面你可以把所有你想要的东西,例如style={{ backgroundColor: 'red' }}
。您也可以在样式属性中创建hover
效果。
如果我不知道女巫项目是否有效,如何使用
style
属性?
非常简单,使用React
你有一个状态管理,你可以设置一个像isActive
的关键项,当你选择项目你应用你想要的风格,如果不是真的,你什么也不应用。
而且为了知道女巫项目的选择,你有一个Ant-D
的道具,他叫做onSelect
请检查以下链接:ANT DESIGN
我发现我需要以更高的优先级覆盖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设计所需的一点优先级。
覆盖属性
:host ::ng-deep .ant-menu.ant-menu-light .ant-menu-item-selected {
border-bottom-color: #4a235a;
}
通过使用:global
,我们可以覆盖细节蚂蚁设计风格
div { // any parent element
:global {
.ant-menu-item-selected {
border-bottom-color: #4a235a;
}
}
}
如果使用较少的文件覆盖样式,则很可能需要设置正确的主要替代方法以影响选择背景颜色:
@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);