htmlcssmaterial-uimui-autocomplete

How to change the right padding of the Material UI 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 ?

Solution

  • 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