How can I set the value of my MaterialUI TextField to uppercase?

Question

I have a Material UI TextField as an input and I need to force the entered text as uppercase. I have tried using textTransform: "uppercase" as part of the style attribute but this does not seem to work. All of the other styling in my component is applied correctly however the textTransform is not.

I have also tried using the standard style method of passing my style as a prop to the component but I get the same result.

My component:

  const MenuInput = (props) => {
  const useStyles = makeStyles((theme) => ({
    input: {
      textTransform: "uppercase",
      marginTop: "10px",
      width: "100%",
      borderRadius: 4,
      backgroundColor: "#FFFFFF",
    },
  }));

  const classes = useStyles();
  return (
    <TextField
      className={classes.input}
      id={props.id}
      color="primary"
      label={props.label}
      variant="filled"
      onChange={(e) => props.onChange(e)}
      error={props.isError}
      helperText={props.error}
    />
  );
};

The output:

Answer 1

You could try applying styles through the inputProps like the following:

 <TextField
      className={classes.input}
      id={props.id}
      color="primary"
      label={props.label}
      variant="filled"
      onChange={(e) => props.onChange(e)}
      error={props.isError}
      helperText={props.error}
      inputProps={{ style: { textTransform: "uppercase" } }}
/>

I'll leave a link with a sandbox where I tested that solution.

Answer 2

try adding important textTransform: "uppercase !important"

Or add inline style <Textfield style={{textTransform:"uppercase"}} />