Bagaimana untuk menyesuaikan gaya pilihan yang dipilih dalam komponen Autolengkap MUI?

Question

Soalannya seperti tajuknya, bagaimana saya boleh menukar gaya pilihan yang dipilih dalam MUI apabila menggunakan pilihan multi Saya mahu menukar gaya semua pilihan yang diserlahkan. Bantuan anda amat dihargai, terima kasih!

Answer 1

Anda boleh menggunakan atribut renderOption untuk memaparkan MUI Autocomplete, kodnya adalah seperti berikut:

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

Ini ialah pautan kotak kod.