Question

148

remove padding of the textbox which comes from material ui

rated 0 times [ 150] [ 2] / answers: 1 / hits: 34789 / 6 Years ago, wed, november 21, 2018, 12:00:00

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 },