Как стилизовать InputLabel & Select на панели приложений? - PullRequest
Новая
       9

Как стилизовать InputLabel & Select на панели приложений?

0 голосов
/ 17 октября 2018

Все еще очень плохо знаком с Material-UI.Используя тему / цвета по умолчанию, я хочу создать AppBar, в котором есть FormControl / InputLabel / Select / MenuItem.С настройками по умолчанию я получаю черное поле ввода на синем, что не очень хорошо.Я думаю, что, вероятно, имеет смысл иметь поле ввода и метки theme.palette.primary.light.Я начал изучать, как это сделать, и занялся настройкой FormLabelClasses на InputLabel, установкой inputProps на Select, установкой classes на значке и настройкой &:before и &:afterграничит с Select и так далее ... Мне кажется, что я делаю это неправильно, так как это кажется довольно трудоемким делом для чего-то, что я думаю, было бы несколько нормально делать?В довершение всего, это все еще не правильно (когда вы зависаете, подчеркивающая рамка становится черной, и я не могу понять, как это исправить!)

Вот мой код: 

const styles = theme => ({
  root: {
    minWidth: 200,
    marginTop: '-10px',
  },
  inputLabel: {
    color: theme.palette.primary.light,
    '&$inputLabelFocused': {
      color: theme.palette.primary.light,
    },
  },
  inputLabelFocused: {
  },
  icon: {
    fill: theme.palette.primary.light,
  },
  select: {
    color: theme.palette.primary.light,
    '&:before': {
      borderColor: theme.palette.primary.light,
    },
    '&:after': {
      borderColor: theme.palette.primary.light,
    },
  },
})

class CustomSelector extends React.Component {

  render() {
    const { classes } = this.props;

    return(
      <div>
        <FormControl className={classes.root}>
          <InputLabel FormLabelClasses={{ root: classes.inputLabel, focused: classes.inputLabelFocused }}>Choose</InputLabel>
          <Select value="" className={classes.select} inputProps={{ classes: { icon: classes.icon } }} autoWidth="true">
            <MenuItem value=""><em>None</em></MenuItem>
            <MenuItem value="Value 1">Value 1</MenuItem>
          </Select>
        </FormControl>
      </div>
    )
  }
}
...