Overriding input class in TextField using makeStyles

Question

When trying to override the padding property in TextField input using MakeStyles, a new class is created called .makeStyles-input which is priorotized under MuiOutlinedInput-root class.

How do I inject a property into the input class (not depending on whether the OutlineInput or FilledInput component is used, and without using the important css tag)?

import { TextField } from '@mui/material';
import { makeStyles } from '@mui/styles'; 

const useStyles = makeStyles({
  input: {
    padding: 0,
  },
});

function CustomTextField(props) {
  const classes = useStyles();

  return (
    <TextField
      InputProps={{
        classes: {
          root: classes.input,
        },
      }}
      {...props}
    />
  );
}

Answer 1

I don't believe that MUI 4 allows for that level of customization on their TextField component.

My recommendation comes from the MUI (v4) docs, I would be to use the InputBase component to customize, or use one of the three input variants that do allow for more customization, namely the OutlinedInput, FilledInput or Input components.

TextField is an abstraction on top of those components, so you lose a bit of customization due to the fact that a lot of the props are decided for you.

Look at the Google Maps input form demo on MUI, it's a good starter for what you're trying to do.