Как изменить цвет подчеркивания ввода пользовательского интерфейса материала? - PullRequest
Новая
       7

Как изменить цвет подчеркивания ввода пользовательского интерфейса материала?

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

У меня есть компонент Material UI Select, который находится на темном фоне, поэтому для этого компонента я бы хотел изменить его так, чтобы текст и цвет линий были белыми.Остальные экземпляры Select должны остаться без изменений.

Хотя я могу заставить текст и значок менять цвет, я не могу понять, как использовать пропелу classes для установки подчеркиванияцвет.Мои попытки также, кажется, заставляют открытую иконку переноситься на следующую строку.Вот пример, демонстрирующий проблему:

Edit Material demo

Я установил свой стиль так: 

const styles = theme => ({
  underline: {
    borderBottom: '2px solid white',
    '&:after': {
      // The MUI source seems to use this but it doesn't work
      borderBottom: '2px solid white',
    },
  }
};

Тогда яустановив его так: 

<Select
  classes={{
    underline: classes.underline,     // Does it go here?
  }}
  inputProps={{
    classes: {
      underline: classes.underline,   // Or does it go here?
    },
  }}
>

Этот метод работает для текста (не показан выше, но в связанном примере), это просто цвет подчеркивания, который я не могу изменить.Чего мне не хватает?

1 Ответ

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

Вы можете изменить цвет подчеркивания Select Компонент, используя две опции

1.Переопределение с помощью классов

Создание элемента <Input /> с использованием input Упражнения и переопределение с использованием классов с использованием клавиши underline. 

<Select
            value={this.state.age}
            onChange={this.handleChange}
            input={<Input classes={{
              underline: classes.underline,
            }}
             name="age" id="age-helper" />}>

Я применил это в вашей песочнице и взялпосмотрите на это здесь

2.Используя MuiThemeProvider

const theme = createMuiTheme({
  palette: {
    primary: green,
  },
});

И примените тему, используя <MuiThemeProvider/>

Я применил оба в этой песочнице

Настройка Выберите

...