Antd Menu.Item组件如何添加带自定义样式的子元素或副标题？

根因说明 #

Ant Design 的 Menu.Item 默认内置了固定高度、单行文本溢出截断、水平 flex 布局的样式，你插入的块级子元素会被默认规则挤压或者溢出隐藏。

实现方案 #

1. 新增自定义样式覆盖默认配置

/* 自定义菜单项类名 */
.custom-menu-item {
  height: auto !important; /* 覆盖默认固定高度 */
  white-space: normal !important; /* 允许文本换行 */
  line-height: 1.4 !important;
  padding: 8px 12px !important; /* 调整内边距适配多行内容 */
  display: flex !important;
  flex-direction: column !important; /* 改为垂直排列，适配标题+副标题结构 */
  align-items: flex-start !important;
}
/* 自定义副标题样式 */
.menu-item-subtitle {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 4px;
}

2. 调整 Menu.Item 写法

<Menu>
  <Menu.Item key="1" className="custom-menu-item">
    <strong>Item 1</strong>
  </Menu.Item>
  <Menu.Divider />
  <Menu.Item key="2" className="custom-menu-item">
    <strong>Item 2</strong>
    <span className="menu-item-subtitle">This item is second</span>
  </Menu.Item>
  <Menu.Divider />
  <Menu.Item key="3" className="custom-menu-item">
    <strong>Item 3</strong>
  </Menu.Item>
</Menu>

补充说明 #

如果你的菜单支持侧边折叠收起，可自行添加判断逻辑，在菜单折叠状态下隐藏副标题，避免布局错乱。

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