title: Material UI - Autocomplete Styling
body: <p>I am trying to style the padding so that the icon is pushed to the far right side in an AutoComplete Material UI component which is currently being overridden by this style:</p>
  
  <p>.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"]</p>
  
  <p>This is the code: </p>
  
  <pre><code>const useStyles = makeStyles(theme =&gt; ({
    inputRoot: {
      color: "blue",
      fontFamily: "Roboto Mono",
      backgroundColor: fade("#f2f2f2", 0.05),
      "&amp; .MuiOutlinedInput-notchedOutline": {
        borderWidth: '2px',
        borderColor: "blue"
      },
      "&amp;:hover .MuiOutlinedInput-notchedOutline": {
        borderWidth: "2px",
        borderColor: "blue"
      },
      "&amp;.Mui-focused .MuiOutlinedInput-notchedOutline": {
        borderWidth: "2px",
        borderColor: "blue"
      }
    }
  }));
  
  const textStyles = makeStyles({
    formControlRoot: {
      fontFamily: "Roboto Mono",
      width: "50vw",
      color: "#ffffff",
      borderRadius: "7px",
      position: "relative",
      "&amp; label.Mui-focused": {
        color: "blue"
      },
    },
    inputLabelRoot: {
      color: "#ffffff",
      fontFamily: "Roboto Mono",
      "&amp;.focused": {
        color: "#ffffff"
      }
    },
  });
  
  export default function ComboBox() {
    const classes = useStyles();
    const textClasses = textStyles();
  
    return (
      &lt;Autocomplete
        id="combo-box-demo"
        classes={classes}
        // options={top100Films}
        getOptionLabel={option =&gt; option.title}
        renderInput={params =&gt; {
          return (
            &lt;TextField
              {...params}
              label="Combo box"
              variant="outlined"
              classes={{ root: textClasses.formControlRoot }}
              fullWidth
              InputProps={{
                ...params.InputProps,
                endAdornment: (
                  &lt;InputAdornment position="end"&gt;
                    &lt;SearchIcon /&gt;
                  &lt;/InputAdornment&gt;
                )
              }}
              InputLabelProps={{ classes: {root: textClasses.inputLabelRoot}}}
            /&gt;
          );
        }}
      /&gt;
    );
  }
  
  </code></pre>
  
  <p>And this is the result: </p>
  
  <p><a href="https://i.stack.imgur.com/7y1Fe.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7y1Fe.png" alt="enter image description here"></a></p>