使用Styled-Components无法覆盖Ant Design垂直子菜单弹出层背景色

根因说明 #

Antd 垂直模式的菜单子弹出层默认挂载在 document.body 根节点下，不属于当前 Menu 组件的 DOM 子树，因此你在 BaseMenu 内部写的嵌套选择器无法命中该弹出层元素，样式不生效。

可行方案 #

方案1：修改弹出层挂载节点（推荐，无需改动现有样式逻辑） #

直接给 Menu 组件添加 popupContainer 属性，将弹出层挂载到当前 Menu 的 DOM 树内，你之前写的 .ant-menu-submenu-popup 样式即可生效。

修改 index.tsx 中 Menu 组件的配置：

<Menu
  width={props.width}
  color={props.color}
  $menuBackgroundColor={props.menuBackgroundColor}
  $hoverColor={props.hoverColor}
  mode={props.menuMode}
  // 新增下面这行配置
  popupContainer={(triggerNode) => triggerNode.parentNode as HTMLElement}
>

方案2：自定义弹出层类名 + 全局样式 #

如果不方便修改挂载节点，可以通过自定义类名 + styled-components 全局样式实现：

1. 首先修改 styles.tsx，导入 createGlobalStyle 并定义弹出层全局样式：

import styled, { createGlobalStyle } from 'styled-components'
// 新增全局样式定义
export const MenuPopupGlobalStyle = createGlobalStyle<{
  $menuBackgroundColor: string;
  $hoverColor: string;
  color: string;
}>`
  .custom-menu-popup > .ant-menu {
    background-color: ${p => p.$menuBackgroundColor} !important;
    color: ${p => p.color};
  }
  .custom-menu-popup .ant-menu-item,
  .custom-menu-popup .ant-menu-submenu-title {
    color: ${p => p.color};
    &:hover {
      color: ${p => p.$hoverColor};
      background-color: transparent !important;
    }
  }
`
// 原有其他样式保持不变

2. 然后修改 index.tsx，引入全局样式并给 Menu 配置自定义弹出层类名：

return (
  <>
    {/* 新增全局样式组件，传入相关属性 */}
    <S.MenuPopupGlobalStyle 
      $menuBackgroundColor={props.menuBackgroundColor}
      $hoverColor={props.hoverColor}
      color={props.color}
    />
    <Menu
      width={props.width}
      color={props.color}
      $menuBackgroundColor={props.menuBackgroundColor}
      $hoverColor={props.hoverColor}
      mode={props.menuMode}
      {/* 新增自定义弹出层类名配置 */}
      popupClassName="custom-menu-popup"
    >
    {/* 原有其他内容保持不变 */}
  </>
)

内容的提问来源于stack exchange，提问作者Giordano