web-dev-qa-db-ja.com

ReactセマンティックUI-メニュー項目のテキストの左側にアイコンを配置します

React Semantic UIを使用すると、デフォルトの外観はこれになります

React Semantic UI default look for Menu-items with an icon

これは、そのコンポーネントを生成する（Webサイトからの）コードです。

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>
    )
  }
}

このようにテキストの左側にアイコンを配置したい

Icons positioned left of text

これを行う方法はありますか？

reactjssemantic-uisemantic-ui-react
7
crinklywrappr

自分の質問になんとか答えたようです。それは素晴らしいことではありませんが、小さな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;
}
4
crinklywrappr