React Semantic UI - 菜单项中文本左侧的位置图标

Question

使用 React Semantic UI 默认外观是这样的

这是生成该组件的代码（来自网站）。

import React, { Component } from 'react'
import { Icon, Menu } from 'semantic-ui-react'

export default class MenuExampleCompactVertical extends Component {
  state = {}

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  render() {
    const { activeItem } = this.state

    return (
      <Menu compact icon='labeled' vertical inverted>
        <Menu.Item name='gamepad' active={activeItem === 'gamepad'} onClick={this.handleItemClick}>
          <Icon name='gamepad' />
          Games
        </Menu.Item>

        <Menu.Item
          name='video camera'
          active={activeItem === 'video camera'}
          onClick={this.handleItemClick}
        >
          <Icon name='video camera' />
          Channels
        </Menu.Item>

        <Menu.Item
          name='video play'
          active={activeItem === 'video play'}
          onClick={this.handleItemClick}
        >
          <Icon name='video play' />
          Videos
        </Menu.Item>
      </Menu>
    )
  }
}

我想像这样将图标放在文本的左侧

知道怎么做吗？

Answer 1

只需使用 list 这看起来也很像您喜欢的样子

Answer 2

看来我设法回答了我自己的问题。不是很好，但看起来有点 css 就可以了。

将图标向左浮动即可

i {
  float: left;
  margin-right: 12px !important;
}

菜单项本身变成了一个 a 元素

a {
  text-align: center;
  line-height: 40px;
}

编辑：

如果有人想知道的话，这就是我实际最终使用的。 CSS 规则使得根据优先级获取自己的规则变得有点复杂。

/******     Sidebar     ******/

.ui.icon.menu .item {
    line-height: 40px;
    padding-right: 500px;
    text-align: justify;
    font-weight: 600;
}

.ui.vertical.menu .item::before {
    height: 0px;
}

.ui.labeled.icon.menu .item > .icon:not(.dropdown) {
    float: left;
    margin-right: 12px !important;
}

Answer 3

我无法让 CSS 覆盖工作，语义总是赢得这场战斗！

我通过将我的图标组件放在 Icon.Group

中来做到这一点

...
          <Menu.Item name='about'>
            <Icon.Group size='large'>
              <Icon name='question circle' />
            </Icon.Group>
            About
          </Menu.Item>
...

我用这个页面来寻找灵感： https://react.semantic-ui.com/elements/icon/#groups-twitter-group

Answer 4

一个普通的老 <span> 应该可以解决这个问题。

<Menu.Item name='create'>
  <span>
    <Icon name='pen square' />
    Create
  </span>
</Menu.Item>

另一种使事情居中并且更容易使用的方法：

<div style={{ display: "inline-flex" }}>
  <Icon size='large' name='pen square' />
  <p style={{ margin: "auto" }}>Create</p>
</div>

React Semantic UI - 菜单项中文本左侧的位置图标

React Semantic UI - position icon to the left of text in Menu Item

reactjs

semantic-ui

semantic-ui-react