Семантически-UI-реагировать супергероя Dropdown.Item подсветка - PullRequest
Новая
       43

Семантически-UI-реагировать супергероя Dropdown.Item подсветка

0 голосов
/ 29 мая 2018

Я начинаю с semantic-ui-реагировать и пробую тему супергероя из semantic-ui forest.При использовании раскрывающегося меню элементы, находящиеся в раскрывающемся списке, выделяются черным текстом и почти черным фоном.

dropdown menu showing dark highlighting

Есть ли что-то, что мне нужно изменить, чтобы текст или фон были светлее при наведении?

Я использую готовый файл semantic.superhero.min.css, а ниже - компонент реакции выпадающего меню (используя пример источника из semantic-ui-реакции: 

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

1 Ответ

0 голосов
/ 30 мая 2018

Этот выглядит как как ошибка в теме супергероя semantic-ui-forest.Когда я просматриваю демо-версию темы супергероя, стиль корректен: http://semantic -ui-forest.com / themes / bootswatch / superhero /

Я скачал css из этой демонстрациии это исправило проблему, с которой я столкнулся локально.

Я открыл проблему github в проекте semantic-ui-forest / forest-themes.https://github.com/semantic-ui-forest/forest-themes/issues/21

...