remove padding of the textbox which comes from material ui

Question

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 1

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

• https://reactjs.org/docs/faq-styling.html
• https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

Solution 2

If you read the docs you can find inputProps (not InputProps) property that applies attributes to the native input element. As shown below you can pass a style attribute.

<TextField
    inputProps={{
       style: {
         padding: 5
       }
    }}
/>

Solution 3

Solution is in this answer How to style MaterialUI textfield

passing className to TextField as well as InputProps

<TextField multiline={true} variant="outlined" rowsMax={10} placeholder="Notes" className={classes.formInput}
            InputProps={{ classes: { input: classes.formAreaInput } }} fullWidth onChange={this.handleNotesInput} />

Solution 4

I found an answer in this site: https://material-ui.com/customization/overrides/

const styles = theme => ({
  noPadding: {
    padding: 0
  },
});

// some code

const { classes } = this.props;

// some code

<OutlinedInput
  labelWidth={0}
  name="timeUnit"
  id="outlined-time-unit"
  classes={{input: classes.noPadding}}
/>

View more solutions

Comments

[Admin]

thanks it worked...can you help me with this one stackoverflow.com/questions/53265169/…

[Admin]

can you tell me why you used this one in classname without this also its working fine ----> ${classes.textField}

[GonzaH]

classes.textField this is becauseI take it from this example material-ui.com/demos/text-fields. About the syntax {${classes.textField} without-padding} is a javascript feature developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

[user11191998]

in your code.. use inputProps={{ style: { padding: 0 } }} ,.......not InputPros

[Muganwas]

This should be the official answer. Thanks @sudazzle

[Tareq Monwer]

Thanks man, this is the perfect and easiest solution for me.