Question

我开始使用semantic-ui-react并从语义ui林中尝试超级英雄主题。使用下拉菜单时，下拉列表中悬停的项目会以黑色文本和近乎黑色的背景突出显示。

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

我正在使用开箱即用的semantic.superhero.min.css文件，下面是下拉菜单反应组件（使用来自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>
    )
  }
}

Answer 1

这个出现是semantic-ui-forest超级英雄主题css中的一个错误。当我查看超级英雄主题的演示时，样式是准确的：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

semantic-ui-react superhero Dropdown.Item highlighting

1 个答案: