2

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}
    />
  );
}
Amitai Fensterheim
  • 722
  • 7
  • 22

1 Answers1

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.

Julio Corzo
  • 329
  • 2
  • 11
  • I'm using mui 5 – Amitai Fensterheim Dec 28 '22 at 07:57
  • @AmitaiFensterheim I assumed you were using 4 since you were using `makeStyles`. The advice still stands, but I would recommend that you move over to another styling solution such as MUI's own `styled`. Regardless, you're going to have to use one of the components mentioned above to get more customization. – Julio Corzo Dec 28 '22 at 19:01