I need to change my dropdown hover to green. I tried inline CSS and makeStyle(), But non of these are not working for me. I have no idea to change this hover color. If anyone can help m with this, I really appreciate it.
I need to change this hover color into green. This is my code:-
<Select
className={dropDowStyle.select}
style={{
borderRadius: '8px', marginLeft: '-150px',
width: '163px', height: '45px', fontSize: '15px',
backgroundColor: "transparent",borderColor:primaryColor "88"
}}
sx={{width: 163}}
// defaultValue=""
input={<OutlinedInput style={{borderColor: primaryColor "88",}}/>}
displayEmpty
value={city}
renderValue={(value) => {
return (
<Box sx={{display: "flex", gap: 2.5}}>
<SvgIcon style={{fontSize: '20px'}}>
<LocationOnIcon/>
</SvgIcon>
{renderLocation && value}
</Box>
);
}}
onChange={cityValueHandler}
>
{shopLocation.map((option) => (
<MenuItem key={option.gg} value={option.gg}>
{option.gg}
</MenuItem>
))}
</Select>
CodePudding user response:
Just inspect the element you want to apply hover CSS.
Find Mui-select-*** in the elements and try to apply on
.Mui-select-***:hover {
color:green;
}
or background to green.
Be careful as this might override all of the selects in your code base, so it might not be the best solution.
CodePudding user response:
You can use inputProps
of Select
and set the sx
prop like this:
<Select
inputProps={{
sx: {
"&.MuiOutlinedInput-input:hover": {
border: "2px solid green"
}
}
}}
>
CodePudding user response:
The container of the menu list is a Paper
which is part of the Menu
(the dropdown of the Select
). You can target the props of the nested component like below. See