Material UI：如何从 TextField 组件的实例中设置 filledInput 组件的样式？

Question

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

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

Answer 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

原因

Material UI：如何从 TextField 组件的实例中设置 filledInput 组件的样式？

Material UI: How to style filledInput component from an instance of the TextField component?

javascript

typescript

reactjs

material-ui

jss