Comment personnaliser le style d'option sélectionné dans le composant MUI Autocomplete ?

Question

La question est, comme le titre l'indique, comment puis-je modifier le style de l'option sélectionnée dans le MUI lorsque j'utilise l'option multi Je souhaite changer le style de toutes les options en surbrillance. Votre aide est grandement appréciée, merci !

Answer 1

Vous pouvez utiliser l'attribut renderOption pour afficher MUI Autocomplete, le code est le suivant :

    <Autocomplete
        multiple
        id="tags-standard"
        value={value}
        onChange={(event, value) => setValue(value)}
        options={top100Films}
        getOptionLabel={(option) => option.title}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            label="Multiple values"
            placeholder="Favorites"
          />
        )}
        renderOption={(props, option, state) => {
          return (
            <li
              {...props}
              style={{
                ...props.style,
                ...(state.selected ? { backgroundColor: "yellow" } : {})
              }}
            >
              {option.title}
            </li>
          );
        }}
      />

Ceci est un Lien Codesandbox.