如何使图标适合语义 UI React 垂直菜单中的 Menu.Item？

Question

我正在用语义构建一个垂直菜单栏 UI React。我的菜单中有许多 Menu.Item 个组件。第一个 Menu.Item 包含一个没有菜单文本的图标组件。我遇到的问题是图标溢出到它下面的 Menu.Item 中。我想不通这是为什么？我试过调整边距、填充、行高，但似乎没有任何效果。有任何想法吗？将不胜感激。谢谢。

这是第一对 Menu.Item 的代码。将文本添加到 Menu.Item 会正确增加大小，但我不希望任何带有图标的菜单文本。

<Menu.Item link><Icon name='x' size='large'/></Menu.Item>
            <Menu.Item as={Link} to='/' onClick={this.handleSidebarHide}>
              Home
            </Menu.Item>
            <Menu.Item as={Link} to='/about' onClick={this.handleSidebarHide}>About Us</Menu.Item>

Answer 1

试试这个对你有帮助

<Menu.Item> link style={{  display: "inline-block" }} ><Icon name='x' size='large'/></Menu.Item>

如何使图标适合语义 UI React 垂直菜单中的 Menu.Item？

How to make Icon fit in Menu.Item in Semantic UI React Vertical Menu?

reactjs

semantic-ui

semantic-ui-react