How to change the hover effect color on the options of material ui select component in react js?

Question

I was trying to change the hover effect of mui Auto Complete component options [inside the drop down]. But it seems I can not find the proper method to do so.

This is the hover effect I am trying to change: Image

I want to put my own color choice.

This is my code [sorry I am new to react. pretty bad codes].

I tried many solution from stack overflow and other websites. They did not work for me [may be because I did not understand what they were saying].

I just want to change the hover effect color, when the mouse hovers over the options inside the select compon.net. But I can not figure out how to do it.

This is my component Image

export default function SelectBox ( { ...props } ) {

    return (

        <Autocomplete
            autoComplete={ true }
            disablePortal
            id="combo-box-demo"
            options={ props.options }
            ChipProps={ { backgroundColor: "green" } } // I have no idea what this does
            sx={ {
                width: { xs: 100, sm: 130, md: 150, lg: 170 },

               // no idea what this does too
               "& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']" :
                {
                    backgroundColor: "#FF8787",
                },

            } }

            renderInput={ ( params ) => <TextField { ...params } label={ props.label } size='small' className='color-change' 
             sx={ {
                width: "80%", backgroundColor: "#F1F1F1", 
                '.MuiOutlinedInput-notchedOutline': {
                    borderColor: '#C6DECD',
                }, borderRadius: 2,
              "&:hover .MuiOutlinedInput-notchedOutline": {
                    borderColor: "green"
                }, "&:hover": {
                    "&& fieldset": {
                        border: "1px solid green"
                    }
                }
            } } /> }
           
        />

    );
}

Answer 1

Assuming that the goal is to customize the background color of options when being hovered, it seems that posted code just need to add :hover to a selector for the sx prop of Autocomplete .

Simplified example tested here: stackblitz

Change the following selector:

"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']": {
  backgroundColor: "#FF8787",
};

To add :hover so that it selects the hovered:

// 👇 Select the hover item here
'& + .MuiAutocomplete-popper .MuiAutocomplete-option:hover': {
  // 👇 Customize the hover bg color here
  backgroundColor: "#FF8787",
};

Full example for Autocomplete , the original selector is kept in here so it customizes the selected item to match the hover effect, but this an optional approach.

export default function SelectBox(props) {
  return (
    <Autocomplete
      autoComplete={true}
      disablePortal
      id="combo-box-demo"
      options={props.options}
      ChipProps={{ backgroundColor: "green" }}
      sx={{
        width: { xs: 100, sm: 130, md: 150, lg: 170 },
        // 👇 Select the hover item here
        "& + .MuiAutocomplete-popper .MuiAutocomplete-option:hover": {
          // 👇 Customize the hover bg color here
          backgroundColor: "hotpink",
        },
        // 👇 Optional: keep this one to customize the selected item when hovered
        "& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']:hover":
          {
            backgroundColor: "hotpink",
          },
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          label={props.label}
          size="small"
          className="color-change"
          sx={{
            width: "80%",
            backgroundColor: "#F1F1F1",
            ".MuiOutlinedInput-notchedOutline": {
              borderColor: "#C6DECD",
            },
            borderRadius: 2,
            "&:hover .MuiOutlinedInput-notchedOutline": {
              borderColor: "green",
            },
            "&:hover": {
              "&& fieldset": {
                border: "1px solid green",
              },
            },
          }}
        />
      )}
    />
  );
}