const styles = makeStyles((theme) => ({
dropDownFormSize: { width: '60%' },
dropDownSelector: {
// fontFamily: 'Comfortaa',
fontSize: '15px',
},
optionDropdown: {
paddingLeft: '10px',
color: 'white',
},
option: {
color: 'white',
border: `1px solid ${theme.palette.primary.contrastText}`,
'&:focus': {
border: `1px solid ${theme.palette.secondary.contrastText} !important`,
},
},
optionItems: {
// work on the hover
backgroundColor: `${theme.palette.primary.light} !important`,
// this hover do not get triggered unless I trigger it from
//the dev tool
'&:hover': {
backgroundColor: ` ${theme.palette.secondary.contrastText} !important`,
},
},
}));
const dummyElement = () => {
const classes = styles();
const languageArray = ['English', 'Mexican', 'Italian', 'Persian'];
return (
<FormControl className={classes.dropDownFormSize}>
<NativeSelect
required
className={classes.dropDownSelector}
value={language}
name='language'
onChange={handleChangeLanguage}
classes={{
root: classes.optionDropdown,
select: classes.option,
}}
>
<option
value=''
disabled
className={classes.optionItems}
>
Select Option
</option>
{languageArray.map((language, i) => {
return (
<option
key={i}
className={classes.optionItems}
value={language}
>
{language}
</option>
);
})}
</NativeSelect>
</FormControl>
);
}
问题是当我将鼠标悬停在本机选择中的选项上时,不会触发该选项的悬停(如果我从开发工具触发 :hover,则应用样式)。当我将鼠标悬停在项目上时,有一些白色背景,我试图覆盖它,但在检查器中找不到它的样式。