Material-UI：悬停时选择边框颜色答案

【问题标题】：Material-UI: Select border color on hoverMaterial-UI：悬停时选择边框颜色
【发布时间】：2021-04-07 04:40:45
【问题描述】：

我可以改变

“之前”

和“之后”

在深色模式下边框颜色为灰色。但是，当我将鼠标悬停在“选择”字段时，它会变成黑色。

我该如何改变呢？非常感谢！

资源：

Change color of Select component's border and arrow icon Material UI

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

Input 的边框底部样式在您悬停时会发生变化。这是您覆盖边框颜色的方式：

const useStyles = makeStyles((theme: Theme) => ({
  formControl: {
    "& .MuiInput-underline:hover:not(.Mui-disabled):before": {
      borderColor: "blue"
    }
  },
  select: {
    "&:before": {
      borderColor: "red"
    },
  }
}));

用法

<FormControl className={classes.formControl}>
  <InputLabel>Age</InputLabel>
  <Select className={classes.select} {...props}
  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

现场演示

【讨论】：

非常感谢！我刚刚按照你的建议实施了，它工作得很好。