UI Matériel - Style automatique

Question

J'essaie de gîter le rembourrage afin que l'icône soit poussée sur le côté extrême droite dans un composant UI de matériau autocomplete qui est actuellement remplacé par ce style:

.Muautocomplecte-haspopupicon.muiautocomplecte-Hasclearicon .Muiautocomplecte-INTERPORTROOT [Classe * = "MuioutLineDInput-racine"]

Ceci est le code:

const useStyles = makeStyles(theme => ({
  inputRoot: {
    color: "blue",
    fontFamily: "Roboto Mono",
    backgroundColor: fade("#f2f2f2", 0.05),
    "& .MuiOutlinedInput-notchedOutline": {
      borderWidth: '2px',
      borderColor: "blue"
    },
    "&:hover .MuiOutlinedInput-notchedOutline": {
      borderWidth: "2px",
      borderColor: "blue"
    },
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderWidth: "2px",
      borderColor: "blue"
    }
  }
}));

const textStyles = makeStyles({
  formControlRoot: {
    fontFamily: "Roboto Mono",
    width: "50vw",
    color: "#ffffff",
    borderRadius: "7px",
    position: "relative",
    "& label.Mui-focused": {
      color: "blue"
    },
  },
  inputLabelRoot: {
    color: "#ffffff",
    fontFamily: "Roboto Mono",
    "&.focused": {
      color: "#ffffff"
    }
  },
});

export default function ComboBox() {
  const classes = useStyles();
  const textClasses = textStyles();

  return (
    <Autocomplete
      id="combo-box-demo"
      classes={classes}
      // options={top100Films}
      getOptionLabel={option => option.title}
      renderInput={params => {
        return (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            classes={{ root: textClasses.formControlRoot }}
            fullWidth
            InputProps={{
              ...params.InputProps,
              endAdornment: (
                <InputAdornment position="end">
                  <SearchIcon />
                </InputAdornment>
              )
            }}
            InputLabelProps={{ classes: {root: textClasses.inputLabelRoot}}}
          />
        );
      }}
    />
  );
}

Et c'est le résultat:

Answer 1

Vous spécifiez le endAdornment pour le Input, mais Autocompletetente également de spécifier la livradorn . Votre endAdornment est gagnant, mais le Autocomplete tente toujours d'appliquer tous les CSS liés à son ornement de fin (espace pour l'icône contextuelle et l'icône CLEAR).

Vous pouvez éteindre les CSS liés à l'ornement de fin de l'autocomplete en passant les accessoires qui désactivent ces fonctionnalités:

    <Autocomplete
      disableClearable
      forcePopupIcon={false}