Wie kann ich den ausgewählten Optionsstil in der MUI-Autocomplete-Komponente anpassen?

Question

Die Frage lautet wie im Titel: Wie kann ich den Stil der ausgewählten Option in der MUI ändern, wenn ich die Option multi verwende? Ich möchte den Stil aller hervorgehobenen Optionen ändern. Wir wissen Ihre Hilfe sehr zu schätzen, vielen Dank!

Answer 1

你可以使用renderOption属性来渲染MUI Autocomplete，代码如下：

    <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>
          );
        }}
      />

这是一个Codesandbox链接。