search

Home  >  Q&A  >  body text

How to customize the selected option style in MUI Autocomplete component?

<p>The question is like the title says, how can I change the style of the selected option in the MUI when using the <code>multi</code> option. I want to change the style of all highlighted options. Your help is greatly appreciated, thank you! </p>
P粉769413355P粉769413355459 days ago557

reply all(1)I'll reply

  • P粉022140576

    P粉0221405762023-08-15 00:57:02

    You can use the renderOption attribute to render MUI Autocomplete, the code is as follows:

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

    This is a Codesandbox link.

    reply
    0
  • Cancelreply