覆盖 Antd 的选中项颜色答案

【问题标题】：Override Antd's selected Item color覆盖 Antd 的选中项颜色
【发布时间】：2018-09-11 19:33:58
【问题描述】：

我想覆盖ant-menu-item-selected 类的background-color 属性。默认情况下，它显示为蓝色。

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

我该怎么办？

感谢您的帮助。

【问题讨论】：

标签： css reactjs antd

【解决方案1】：

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

【讨论】：

这个。就在这儿。如果你想禁用选定的菜单项突出显示（这应该是一个内置的功能......）你可以这样做并设置 background-color: transparent

【解决方案2】：

在And-Design 的文档中，您有一个选项叫：style

在里面你可以放任何你想要的东西，比如style={{ backgroundColor: 'red' }}。您也可以在样式属性中制作hover 效果。

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

Very simple, with React you have a state management you could set a key like isActive when item is selected you apply style what you want and if it not true, you apply nothing.

为了知道女巫物品被选中，你有一个道具Ant-D他叫onSelect

请查看此链接：ANT DESIGN

【讨论】：

但我不能使用它，因为我事先不知道会选择哪个项目（以及我必须在哪个项目上放置样式）。
好吧，我明白你的意思了，你可以在选择项目时设置一个状态为真，你style道具你可以检查状态是否为真，如果它是真的，你可以设置此样式，如果为 false，则可以不设置任何内容。
但是如果没有一些可怕的代码查询项目列表以了解哪个具有ant-menu-item-selected 类，您将如何知道选择了哪个元素？
非常感谢您的帮助，但我以另一种方式解决了我的问题。我在下面发布了我的答案，如果我犯了一些错误，请随时指出我的错误。
我使用 @emotion/react 与 Global 和 css 并覆盖 li.ant-menu-item 查询。您可以通过开发人员工具检查查询。

【解决方案3】：

.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;
}

它对我有用！太好了，感谢上帝。

【讨论】：

【解决方案4】：

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

const CustomMenu = styled(Menu)`

&& .ant-menu-item-selected {

背景色：#000000;

} } `

【讨论】：

完美！！，非常感谢，为什么我不知道为什么不赞成。比修改样式表要好得多，因为它可以动态添加

【解决方案5】：

被覆盖的属性

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

【讨论】：

点评来源：您好，请不要只回答源代码。尝试对您的解决方案如何工作提供一个很好的描述。请参阅：How do I write a good answer?。谢谢

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

如果您使用 less 文件覆盖样式，您很可能希望设置正确的主要替代品以影响选择背景颜色：

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

【讨论】：