CODEWITHSUNDEEP
javascriptreactjstypescriptmaterial-uijss
AKL012
AKL012

Reputation: 399

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

I am trying to change the colour of the filledInput component, but TextField does not include a FilledInputProps prop as it does for InputProps to be able to edit with classes.

How can I style the FilledInput component that makes up TextField?

Upvotes: 0

Views: 4104

Answers (1)

keikai
keikai

Reputation: 15186

Use MUI nesting selector for 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

Reason

enter image description here

Upvotes: 3

Related Questions