antd 菜单图标 API 不起作用.不呈现

Question

im 尝试呈现带有子菜单的侧菜单，但是我很快意识到图标 API 不起作用：

<Menu.Item key="1" >
<HomeOutlined />
<span>Home</span>
<Link to='/' />
</Menu.Item>

这是菜单项之一，如果我将图标放置在menu.item中，它会正确呈现。 但是当我这样做时：

<Menu.Item key="1" icon={<HomeOutlined/>}>
<span>Home</span>
<Link to='/' />
</Menu.Item>

图标不再显示。我对第一种方法没有任何问题，但是当我尝试将第一种方法移植到子菜单时：

<SubMenu key="sub1" title="Settings">
<SettingFilled />
<Menu.Item key="7" onClick={this.props.logout}>
<span>Logout</span>
</Menu.Item>
</SubMenu>

它将在内部下拉列表中呈现图标，而不是其应有的位置

Answer 1

您可以尝试此操作，图标必须是标题参数的一部分，以便在菜单未展开时正确显示图标。

<SubMenu key="sub1" title={<span><UserOutlined /><span>Settings</span></span>}>
<SettingFilled />
<Menu.Item key="7" onClick={this.props.logout}>
<span>Logout</span>
</Menu.Item>
</SubMenu>

Answer 2

你可以这样做： -

<SubMenu key="sub1" title={<span><UserOutlined /><span>Settings</span></span>}>
<SettingFilled />
<Menu.Item key="7" onClick={this.props.logout}>
<span>Logout</span>
</Menu.Item>

但是会出现填充问题，因为 Menu.Item 的填充是相对于子菜单的标题给出的，而填充是作为内联 css 给出的，因此您将无法覆盖 css，并且使用重要是一个坏习惯。在这里，您正在使用，因此如果您希望内容对齐，则可以为链接提供填充。