React Material-UI Select组件下拉菜单悬停颜色如何修改为绿色

解决方法 #

你用的是MUI v5版本的组件，有两种简单的方案可以修改菜单项悬停颜色，优先级足够覆盖内置样式：

方案1：单独给MenuItem配置悬停样式

直接在你遍历生成的MenuItem组件上添加sx属性设置hover状态的样式：

{shopLocation.map((option) => (
    <MenuItem 
        key={option.gg} 
        value={option.gg}
        sx={{
            // 可替换为你需要的具体绿色色值，比如#2e7d32
            '&:hover': {
                backgroundColor: 'green'
            }
        }}
    >
        {option.gg}
    </MenuItem>
))}

方案2：在Select组件上统一配置所有菜单项的悬停样式

如果不想逐个给MenuItem加样式，也可以直接在Select的sx属性里指定后代菜单项的悬停样式：

<Select
    className={dropDowStyle.select}
    style={{
        borderRadius: '8px', marginLeft: '-150px',
        width: '163px', height: '45px', fontSize: '15px',
        backgroundColor: "transparent",borderColor:primaryColor + "88"
    }}
    sx={{
        width: 163,
        '& .MuiMenuItem-root:hover': {
            backgroundColor: 'green'
        }
    }}
    // 其余原有属性保持不变
>
    {/* 原有菜单项代码 */}
</Select>

之前方法失效原因 #

• 内联CSS不支持:hover这类伪类选择器，所以直接写在style属性里的悬停规则不会生效
• MUI v5版本中makeStyles()属于兼容v4的旧API，默认样式优先级低于组件内置样式和sx属性，容易被覆盖导致不生效

原有悬停效果参考：

内容的提问来源于stack exchange，提问作者Zenixo