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

    );
}

CodePudding user response：

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:

//