css - 如何覆盖 Material-UI 中 Native Select 的下拉项/选项的样式？

Question

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，则应用样式）。当我将鼠标悬停在项目上时，有一些白色背景，我试图覆盖它，但我在检查器中找不到它的样式。

标签： cssreactjsmaterial-uimaterial-design