语义 UI 反应超级英雄 Dropdown.Item 突出显示答案

【问题标题】：semantic-ui-react superhero Dropdown.Item highlighting语义 UI 反应超级英雄 Dropdown.Item 突出显示
【发布时间】：2018-05-30 12:29:28
【问题描述】：

我开始使用语义 UI 反应并尝试语义 UI 森林中的超级英雄主题。使用下拉菜单时，悬停在下拉菜单中的项目以黑色文本和近乎黑色的背景突出显示。

为了让文本或背景在悬停时颜色变浅，我需要更改什么吗？

我使用的是开箱即用的 semantic.superhero.min.css 文件，下面是下拉菜单 react 组件（使用来自 semantic-ui-react 的示例源：

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

const options = [
  { key: 1, text: 'This is a super long item', value: 1 },
  { key: 2, text: 'Dropdown direction can help', value: 2 },
  { key: 3, text: 'Items are kept within view', value: 3 },
]

export default class MenuBar extends Component {
  state = {}

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

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

    return (
      <Menu>
        <Menu.Item>
          <Input placeholder='Search...' />
        </Menu.Item>

        <Menu.Item>
          Home
        </Menu.Item>
        <Dropdown item simple text='Categories'>
          <Dropdown.Menu>
            <Dropdown.Item>Electronics</Dropdown.Item>
            <Dropdown.Item>Automotive</Dropdown.Item>
            <Dropdown.Item>Home</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>

        <Menu.Item name='browse' active={activeItem === 'browse'} onClick={this.handleItemClick}>
          <Icon name='grid layout' />
          Browse
        </Menu.Item>
        <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick}>
          Messages
        </Menu.Item>
        <Dropdown item simple text='Left menu' direction='right' options={options} />

        <Dropdown item simple text='More'>
          <Dropdown.Menu>
            <Dropdown.Item icon='edit' text='Edit Profile' />
            <Dropdown.Item icon='globe' text='Choose Language' />
            <Dropdown.Item icon='settings' text='Account Settings' />
          </Dropdown.Menu>
        </Dropdown>
      </Menu>
    )
  }
}

【问题讨论】：

今天有点进步。删除组件（和子组件），恢复了悬停下拉项的正确突出显示。但是，菜单栏丢失了它从 Menu 继承的许多格式。

标签： semantic-ui semantic-ui-react

【解决方案1】：

这似乎是语义用户界面森林超级英雄主题 css 中的一个错误。当我查看超级英雄主题的demo时，样式准确：http://semantic-ui-forest.com/themes/bootswatch/superhero/

我从那个演示下载了 css，它纠正了我在本地看到的问题。

我在 semantic-ui-forest/forest-themes 项目中打开了一个 github 问题。 https://github.com/semantic-ui-forest/forest-themes/issues/21

【讨论】：