如何更改下拉悬停颜色React Material-UI Select

Question

我需要将下拉菜单的悬停颜色更改为绿色。我尝试使用内联CSS和makeStyle()，但是这些都对我没有用。我不知道如何更改此悬停颜色。如果有人能帮助我，我真的很感激。

我需要将这个悬停颜色改成绿色。 这是我的代码：-

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

- Zenixo

---

请澄清一下，您想要输入框的边框颜色还是下拉列表的颜色？ - NearHuscarl

Answer 1

菜单列表的容器是一个 Paper，它是 Select 的下拉菜单组件 Menu 的一部分。您可以像下面这样针对嵌套组件的 props 进行定位。有关 Menu 类名的列表，请参见 此处。另请查看该组件状态的所有 classNames。

<Select
  // to override the border color of the Select input
  sx={{
    "&:hover": {
      "&& fieldset": {
        border: "3px solid green"
      }
    }
  }}
  // to override the color of the dropdown container
  MenuProps={{
    PaperProps: {
      sx: {
        "& .MuiMenuItem-root.Mui-selected": {
          backgroundColor: "yellow"
        },
        "& .MuiMenuItem-root:hover": {
          backgroundColor: "pink"
        },
        "& .MuiMenuItem-root.Mui-selected:hover": {
          backgroundColor: "red"
        }
      }
    }
  }}

实时演示

- NearHuscarl

Answer 2

您可以使用Select的inputProps并设置sx属性，如下所示：

    <Select
      inputProps={{
        sx: {
          "&.MuiOutlinedInput-input:hover": {
            border: "2px solid green"
          }
        }
      }}
    >

- Majid M.

Answer 3

只需检查要应用悬停CSS的元素。 https://mui.com/customization/how-to-customize/#overriding-nested-component-styles 例如，在元素中查找MuiSlider-thumb，并尝试应用它，放弃前面的哈希值

.MuiSlider-thumb:hover {
 color:green;
}

或将背景改为绿色。

请注意，这可能会覆盖代码库中的所有选择器，因此可能不是最佳解决方案。

- murat dereköylü