Material-UI: Native Выберите при использовании темной темы в браузерах Windows белый текст на белом фоне - PullRequest
Новая
       15

Material-UI: Native Выберите при использовании темной темы в браузерах Windows белый текст на белом фоне

0 голосов
/ 30 января 2019

При использовании Native Select from Material-UI, если вы используете темную тему, то выпадающий список имеет белый текст на белом фоне.

Это также видно на демонстрационной странице компонента в темном режиме:

enter image description here

Можно ли изменить цвет фона выпадающего меню без измененияфактический выбранный цвет фона?

Редактировать : это было зарегистрировано как проблема: https://github.com/mui-org/material-ui/issues/14337

Ответы [ 2 ]

0 голосов
/ 30 января 2019

ОБНОВЛЕНИЕ Начиная с версии 3.9.2, эта проблема была исправлена ​​в Material-UI, поэтому обходной путь, приведенный ниже, больше не нужен.

Вероятно, это следует исправить в Material-UI, но вы можете исправить это в конкретном случае использования следующим образом:

Используйте тему, чтобы указать цвет фона опции (см. Как изменить цвет фона опции выбора блока? ): 

const styles = theme => ({
  select: {
    "& option": {
      background: theme.palette.background.paper
    }
  }
});

И затем используйте этот класс для выбора: 

  <Select native className={classes.select}>

Вот модифицированная версия демо, используя это:

Edit 2vq8w4nnjn

0 голосов
/ 30 января 2019

Это, очевидно, то, что должно быть исправлено в пакете.

Однако я обнаружил, что это происходит только при использовании нативного тега <option>.Этот код, если из проблемной демонстрации их: 

          <Select
            native
            value={this.state.age}
            onChange={this.handleChange('age')}
            inputProps={{
              name: 'age',
              id: 'age-native-simple',
            }}
          >
            <option value="" />
            <option value={10}>Ten</option>
            <option value={20}>Twenty</option>
            <option value={30}>Thirty</option>
          </Select>

Таким образом, у вас есть два варианта:

  1. Вы можете стилизовать option с помощью css и ovveride background или fontcolor для чего угодно.

  2. Вы можете использовать другой компонент в material-ui, который хорошо работает в перевернутых ситуациях, который они использовали в другой демонстрации.(Используя MenuItem), вот так: 

          <Select
        multiple
        value={this.state.name}
        onChange={this.handleChange}
        input={<Input id="select-multiple-checkbox" />}
        renderValue={selected => selected.join(', ')}
        MenuProps={MenuProps}
      >
        {names.map(name => (
          <MenuItem key={name} value={name}>
            <ListItemText primary={name} />
          </MenuItem>
        ))}
      </Select>

Смотрите полный пример здесь .(Взято с материала UI демонстрационная страница )

...