Как изменить цвет подчеркивания и метки в Material-UI

Question

Я использовал эту демонстрацию, чтобы изменить цвета некоторых полей ввода: https://stackblitz.com/edit/material-ui-custom-outline-color

Мне было интересно, есть ли у кого-нибудь похожая демонстрация, когда они меняли цвет своих выбрать компоненты из материала UI? Или несколько инструкций о том, как go сделать это (я уже просмотрел документы, но изо всех сил пытаюсь им следовать).

Спасибо!

Answer 1

Оберните ваш выбор в <FormControl />, а также добавьте <InputLabel /> как <Select /> sibling. После этого переопределите класс InputLabel root, а также укажите className для выбора компонента:

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  underline: {
    color: 'red' ,
    '&::after': {
      borderBottom: '2px solid red'
    },
    '&::before': {
      borderBottom: '2px solid yellow'
    }
  },
  inputLabelRoot: {
    color: 'red',
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel classes={{root: classes.inputLabelRoot}}>Age</InputLabel>
        <Select
          className={classes.underline}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

Изменить невидимый фон