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

【问题标题】：Material UI: How to style filledInput component from an instance of the TextField component?Material UI：如何从 TextField 组件的实例中设置填充输入组件的样式？
【发布时间】：2020-07-30 22:05:37
【问题描述】：

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

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

【问题讨论】：

那里需要什么款式？你可以在那里控制很多东西。

标签： javascript reactjs typescript material-ui jss

【解决方案1】：

使用 MUI nesting selector 作为类名 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

原因

【讨论】：