javascripthtmlcssreactjsmaterial-ui

remove padding of the textbox which comes from material ui

I am trying to remove the padding from a textbox but the problem is it's coming from the Material UI.

I gave padding 0 for all the classes but padding is still not getting removed.

Can you tell me how to remove this padding?

.MuiOutlinedInput-input-1708 {
    padding: 18.5px 14px;
}

Here is my code and a sandbox:

https://codesandbox.io/s/m58841kkwp

cssLabel: {
    "&$cssFocused": {
      color: { borderColor: "red", padding: 0 }
    }
  },
  cssFocused: { borderColor: "red", padding: 0 },
  cssUnderline: {
    "&:after": {
      borderBottomColor: "red",
      padding: 0
    }
  },
  // cssOutlinedInput: {
  //   "&$cssFocused $notchedOutline": {
  //     borderColor: "green"
  //   }
  // },

  cssOutlinedInput: {
    "& $notchedOutline": {
      //add this nested selector
      borderColor: "red",
      padding: 0
    },

    "&$cssFocused $notchedOutline": {
      borderColor: "green",
      padding: 0
    }
  },

  notchedOutline: { borderColor: "red", padding: 0 },
Solution

  • one way to solve it could be to create a useful class and overwrite the styles of the material text field. This way you will make it reusable

    I leave the example https://stackblitz.com/edit/react-textfield-without-padding

    Note: I left it with a 5px padding to make it look better as an example. You can customize it so you do not have padding

    Useful resources