javascript - Material UI：如何从 TextField 组件的实例中设置填充输入组件的样式？

Question

我正在尝试更改 fillInput 组件的颜色，但 TextField 不包含 FilledInputProps 道具，因为它使 InputProps 能够使用类进行编辑。

如何设置构成 TextField 的 FilledInput 组件的样式？

Answer 1

对 className使用 MUI嵌套选择器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

---

原因