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-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected {
  color: red;
  border-bottom: 2px solid red;
}

为我工作！！太好了，感谢上帝。

Answer 2

在And-Design的文档中，您可以选择一个名为：style

例如，您可以在内部放入style={{ backgroundColor: 'red' }}之类的内容。您也可以在样式属性中创建hover效果。

如果我不知道女巫物品处于活动状态，如何使用style属性？

非常简单，使用React，您可以进行状态管理，可以在选择项目时设置isActive之类的键，然后按需要应用样式，如果不正确，则不应用任何样式。

为了知道选择了巫婆物品，您有一个Ant-D他叫onSelect的道具

请检查此链接：ANT DESIGN

Answer 3

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

Answer 4

覆盖属性

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

Answer 5

通过使用:global，我们可以覆盖详细的蚂蚁设计样式

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

Answer 6

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

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

Answer 7

经过大量研究，我发现我们可以使用@emotion/styled 包来覆盖 Antd 的选定项颜色（::：您可以使用命令 yarn add @emotion/styled 添加 @emotion/styled 或 npm install @emotion/styled )

const CustomMenu = styled(Menu)`

&& .ant-menu-item-selected {

背景色：#000000;

} } `

覆盖Antd的选定项目颜色

7 个答案: