Home > database >  how to change dropdown hover color react material ui select
how to change dropdown hover color react material ui select

Time:10-04

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.

enter image description here

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

Edit 69436218/how-to-change-dropdown-hover-color-react-material-ui-select (forked)

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 Codesandbox Demo

  • Related