I've been trying to customize the hover effect for the options in the mui Auto Complete component drop-down menu, but I'm having trouble finding the right method to do so.
Here is the hover effect that I want to change: Image
I'd like to use my own color choice for the hover effect.
Below is the code for my component [please excuse any errors, as I am new to react].
I have attempted various solutions from different sources, including Stack Overflow and other websites. Unfortunately, none of them have worked for me, possibly due to a lack of understanding on my part.
My primary goal is to modify the hover effect color when the mouse hovers over the select component options. However, I am struggling to figure out how to accomplish this.
This is an image of my component
export default function SelectBox ( { ...props } ) {
return (
<Autocomplete
autoComplete={ true }
disablePortal
id="combo-box-demo"
options={ props.options }
ChipProps={ { backgroundColor: "green" } } // Uncertain about the purpose of this
sx={ {
width: { xs: 100, sm: 130, md: 150, lg: 170 },
// Unsure about this as well
"& + .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"
}
}
} } /> }
/>
);
}