Пользовательский интерфейс материала: Как стилизовать компонент fillInput из экземпляра компонента TextField?

Question

Я пытаюсь изменить цвет компонента fillInput, но TextField не включает в себя реквизит FilledInputProps, как для InputProps, чтобы иметь возможность редактировать с классами.

Как мне стилизовать компонент FilledInput, который составляет TextField?

Answer 1

Используйте MUI селектор вложенности для className MuiFilledInput-input

const useStyles = makeStyles((theme) => ({
  root: {
    '& .MuiFilledInput-input': {
      backgroundColor: 'lightblue',
      border: '1px solid red'
    }
  },
}));

export default function ComposedTextField() {
  const [name, setName] = React.useState('Composed TextField');
  const classes = useStyles();

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <FormControl variant="filled">
        <InputLabel htmlFor="component-filled">Name</InputLabel>
        <FilledInput id="component-filled" value={name} onChange={handleChange} />
      </FormControl>
    </form>
  );
}

https://stackblitz.com/edit/4k74pg

---

Причина