Antd Menu.Item 中的副标题或子元素

Question

我看到您可以在Antd Menu.Item 中使用wrap words，但我想知道您是否可以为菜单项创建（样式化的）子元素或副标题。类似：

------
**Item 1**
---
**Item 2**
This item is second
---
**Item 3**
------

我尝试添加<div> 或<p>，如下所示，但它似乎被隐藏了。

<Menu.Item key={eventKey} {...props}
    <span>{item.title}</span>
    <div>A styled subtitle here</div>
</Menu.Item>

Answer 1

我认为您可以在 Menu.Item 中使用纯 html 元素和 css。

也许您需要使用height 或lineHeight 设置并查看inspect 视图。

这个基本示例对我有用：

<Menu.Item key="1" style={{ lineHeight: '20px' }}>
   <span>
      Option 1
   </span>
   <br />
   <span>Test</span>
</Menu.Item>

Here 是一个有效的 Stackblitz。

<h1> 等元素也能正常工作。