antd layout sider 折叠时如何为子菜单项添加自定义背景色或 css？

【问题标题】：How to add custom background color or css to submenu items when antd layout sider is collapsed?antd layout sider 折叠时如何为子菜单项添加自定义背景色或 css？
【发布时间】：2023-01-19 15:16:24
【问题描述】：

我正在使用 antd layout.sider 构建侧边栏，它总是会折叠。我设法改变了侧边栏的背景，但有些菜单项有子菜单项，它们会像上图带背景的弹出窗口一样出现。我想知道如何更改背景颜色以及如何添加自定义 CSS 类悬停效果。

【问题讨论】：

标签： css reactjs antd

【解决方案1】：

您可以自定义 CSS

.ant-menu-light.ant-menu-submenu > .ant-menu {
color: #fff;
background: #000;
}

和悬停

.ant-menu-light:not(.ant-menu-horizontal) .ant-menu-item:not(.ant-menu-item-selected):hover {
background-color: #090909;
}
.ant-menu-light .ant-menu-item:hover:not(.ant-menu-item-selected):not( .ant-menu-submenu-selected) {
color: #fff;
}

【讨论】：