为了解决这个问题,可以使用 CSS 样式为子菜单项添加滚动条。例如,使用以下样式:
.ant-menu-sub { max-height: 200px; /* 设置最大高度 / overflow-y: auto; / 添加垂直滚动条 */ }
.ant-menu-submenu-title { white-space: nowrap; /* 禁止子菜单标题换行 */ }
同时,在菜单项的 props 中添加子菜单的样式 className:
完整示例代码如下:
import { Menu } from 'antd'; import 'antd/dist/antd.css';
// CSS 样式 const submenuStyles = ` .ant-menu-sub { max-height: 200px; overflow-y: auto; }
.ant-menu-submenu-title { white-space: nowrap; } `;
function App() { return ( <>
>
); }