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

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 componenet. 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"
                    }
                }
            } } /> }
           
        />

    );
}

Solution

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