Antd 5.1.4菜单项高度调整问题求助

样式来源说明 #

Antd 5 采用 CSS-in-JS 设计体系，菜单项默认40px高度来自全局主题 token 中的 menuItemHeight（对应特定菜单类型还有专属token，比如内联侧边栏菜单的 menuInlineItemHeight），是框架预设的设计规范值。

调整方法 #

方法一：全局主题配置（推荐） #

通过 ConfigProvider 统一修改主题 token，适配Antd设计体系，不会破坏样式一致性：

import { ConfigProvider, Menu } from 'antd';

export default function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          menuItemHeight: 32, // 替换为你需要的高度值
          // 若为内联侧边栏菜单，可补充调整：menuInlineItemHeight: 32
        },
      }}
    >
      <Menu mode="vertical">
        <Menu.Item key="1">菜单项1</Menu.Item>
        <Menu.Item key="2">菜单项2</Menu.Item>
      </Menu>
    </ConfigProvider>
  );
}

方法二：局部自定义样式 #

针对单个菜单单独调整，需同时设置高度和行高保证文字垂直居中：

/* 在全局样式文件中添加 */
.custom-menu .ant-menu-item {
  height: 32px;
  line-height: 32px;
}

组件中使用自定义类名：

<Menu className="custom-menu">
  <Menu.Item key="1">菜单项1</Menu.Item>
</Menu>

若遇到样式优先级问题，可添加 !important 或结合父容器类名使用更精确的选择器。

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