如何用styled-components修改Antd的overlayClassName？样式不生效

Antd Dropdown的下拉菜单（overlay）默认挂载到body元素下，完全脱离了你用styled-components封装的Dropdown组件的DOM结构。而styled-components生成的样式仅作用于组件自身的容器节点，嵌套的.ant-override选择器只能选中该容器内部的元素，无法定位到body下的弹窗元素，因此样式覆盖失效。

方案一：修改弹窗挂载容器（推荐，样式隔离性更好） #

调整styled-components封装的Dropdown，通过getContainer属性将弹窗挂载到组件自身的DOM容器内，让styled-components的样式能覆盖到弹窗：

import styled from "styled-components";
import { Dropdown as AntDropdown } from "antd";

const Dropdown = styled(AntDropdown).attrs({
    overlayClassName: "ant-override",
    // 将弹窗挂载到当前组件的DOM节点下
    getContainer: (node) => node,
})`
  .ant-override {
    .ant-dropdown-menu {
      background: #333333;
      min-width: 230px;
      box-shadow: 0 1.55px 10px rgba(0, 0, 0, 0.04);
      border-radius: 16px;
    }
    .ant-dropdown-menu-item:hover {
      background: #262626;
      color: red;
    }
  }
`

同时可以简化你的DropdownMenu组件——因为styled的Dropdown已经通过.attrs默认设置了overlayClassName，无需重复传递：

import { FC } from "react"
import { DropdownProps } from "antd/lib/dropdown/dropdown";
import { DropdownStyles } from "./styles";

const { Dropdown } = DropdownStyles

export const DropdownMenu: FC<DropdownProps> = ({overlayClassName, ...rest}) => <Dropdown {...rest} />;

方案二：全局样式注入（适合弹窗必须挂载到body的场景） #

如果因布局限制必须让弹窗留在body下，使用styled-components的createGlobalStyle注入全局样式：

1. 创建全局样式组件：

import { createGlobalStyle } from 'styled-components';

export const DropdownGlobalStyle = createGlobalStyle`
  .ant-override {
    .ant-dropdown-menu {
      background: #333333;
      min-width: 230px;
      box-shadow: 0 1.55px 10px rgba(0, 0, 0, 0.04);
      border-radius: 16px;
    }
    .ant-dropdown-menu-item:hover {
      background: #262626;
      color: red;
    }
  }
`

2. 在应用入口或使用Dropdown的页面引入该组件：

import { DropdownGlobalStyle } from './path-to-your-global-style';

function App() {
  return (
    <>
      <DropdownGlobalStyle />
      {/* 应用其他内容 */}
    </>
  );
}

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