Antd SubMenu子菜单内容无法滚动问题求助

问题分析 #

当前实现存在两个核心问题导致滚动失效：

• 直接在SubMenu内嵌套原生<div>和<li>，不符合Antd Menu组件的结构规范，SubMenu的下拉容器会对非Menu系列组件的样式产生冲突。
• 自定义<div>的高度设置被SubMenu默认的下拉面板样式覆盖，无法触发滚动行为。

解决方案 #

修改代码如下，使用Antd官方的Menu.Item渲染子项，并通过popupStyle属性给SubMenu的下拉面板设置固定高度和滚动属性：

import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Menu, Icon } from "antd";

const { SubMenu } = Menu;

function handleClick(e) {
  console.log("click", e);
}

const options = [
  { key: "1", value: "option1" },
  { key: "2", value: "option12" },
  { key: "3", value: "option13" },
  { key: "4", value: "option14" },
  { key: "5", value: "option15" },
  { key: "6", value: "option16" },
  { key: "7", value: "option17" },
  { key: "8", value: "option18" },
  { key: "9", value: "option19" },
  { key: "10", value: "option134" },
  { key: "11", value: "option132" },
  { key: "12", value: "option142" },
  { key: "13", value: "option123" }
];

ReactDOM.render(
  <Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
    <SubMenu
      key="sub4"
      title={
        <span>
          <Icon type="setting" />
          <span>Navigation Three</span>
        </span>
      }
      // 给下拉面板设置最大高度和滚动属性
      popupStyle={{ maxHeight: "100px", overflowY: "auto" }}
    >
      {/* 使用Menu.Item渲染子项，符合组件规范 */}
      {options?.map((data) => (
        <Menu.Item key={data.key}>{data.value}</Menu.Item>
      ))}
    </SubMenu>
  </Menu>,
  document.getElementById("container")
);

关键修改点 #

• 替换原生元素为Menu.Item：确保子项符合Antd Menu的组件结构，避免样式冲突。
• 设置popupStyle：直接给SubMenu的下拉面板设置maxHeight和overflowY，让下拉内容超出高度时自动触发滚动。

如果需要更灵活的自定义样式，也可以通过CSS类名覆盖Antd的默认样式：

/* 在index.css中添加 */
.ant-menu-submenu-popup {
  max-height: 100px;
  overflow-y: auto;
}

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