覆盖Antd选择的项目颜色

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

关于And-Design的文档您有一个名为：style的选项

在里面你可以把所有你想要的东西，例如style={{ backgroundColor: 'red' }}。您也可以在样式属性中创建hover效果。

如果我不知道女巫项目是否有效，如何使用style属性？

非常简单，使用React你有一个状态管理，你可以设置一个像isActive的关键项，当你选择项目你应用你想要的风格，如果不是真的，你什么也不应用。

而且为了知道女巫项目的选择，你有一个Ant-D的道具，他叫做onSelect

请检查以下链接：ANT DESIGN

Answer 2

我发现我需要以更高的优先级覆盖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设计所需的一点优先级。

Answer 3

覆盖属性

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

Answer 4

通过使用:global，我们可以覆盖细节蚂蚁设计风格

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

Answer 5

如果使用较少的文件覆盖样式，则很可能需要设置正确的主要替代方法以影响选择背景颜色：

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