CODEWITHSUNDEEP
htmlcssmaterial-ui
unpredictable
unpredictable

Reputation: 360

How to change the right padding of the MUI Autocomplete Input box?

By default MUI adds, 65px of right padding to the outlined Autocomplete box. However, I would like to change the right padding to 50px as per my usecases. I am trying to override the right padding but no luck. Here is my sandbox where I tried changing the right padding of the Autocomplete input box - https://codesandbox.io/s/sizes-demo-material-ui-forked-95rvqw

Also attaching the screenshots of the Autocomplete box whose padding needs to be changed.

Right padding to be changed DOM element whose right padding to be changed

Can someone please suggest how to override the default right padding of the Autocomplete box ?

Upvotes: 6

Views: 5869

Answers (3)

Khrystyna Yelyseieva
Khrystyna Yelyseieva

Reputation: 11

MuiAutocomplete: {
  root: {
    "&.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiOutlinedInput- 
     root": {
        paddingRight: 0,
    },
  }
}

Upvotes: 1

Dmitriif
Dmitriif

Reputation: 2433

This padding (65px) exists for a good reason - in order to not allow input content to overflow the clear button at the end of the input. You can pass disableClearable prop to your Autocomplete component in order to have padding 6px from all sides but you will lose the clear button. Otherwise, just overriding the existing padding will lead to collisions between content and the clear button in UI.

      <Autocomplete
        disableClearable
        multiple
        ...other props

Upvotes: 1

Hamed Siaban
Hamed Siaban

Reputation: 1682

Simply change your sx attribute like this:

sx={{
  "& .MuiOutlinedInput-root": {
    paddingRight: "10px!important",
  },
}}

Explanation: Your approach is right, but there are some problems that I'll try to correct step by step.

First of all, the & sign needs to be the first letter of the string followed by a space. For example:

"& .MuiAutocomplete-hasPopupIcon"

Second, You should target the classes one by one, like this:

sx={{
  "& .MuiAutocomplete-hasPopupIcon": {
    paddingRight: "50px"
  },
  "& .MuiAutocomplete-hasClearIcon":{
    paddingRight: "50px"
  },
  "& .MuiAutocomplete-inputRoot":{
    paddingRight: "50px"
  },
}}

Third, You only need to select .MuiOutlinedInput-root class for your desired change.

And lastly, because (in this case) the classes in the nested component have higher specificity, You need to add !important keyword to finish the work.

See the MUI Documentations on how to customize nested components using the sx prop

Upvotes: 11

Related Questions