Wie kann ich den ausgewählten Optionsstil in der MUI-Autocomplete-Komponente anpassen?
P粉769413355
P粉769413355 2023-08-14 10:47:21
0
1
566
<p>Die Frage lautet wie im Titel: Wie kann ich den Stil der ausgewählten Option in der MUI ändern, wenn ich die Option <code>multi</code> verwende? Ich möchte den Stil aller hervorgehobenen Optionen ändern. Wir wissen Ihre Hilfe sehr zu schätzen, vielen Dank! </p>
P粉769413355
P粉769413355

Antworte allen(1)
P粉022140576

你可以使用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链接

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage