html - 更改 Material UI TextField 悬停时的边框颜色

Question

我一直在尝试更改 Material UI 的轮廓的悬停颜色TextFeild。似乎它有许多状态，如活动、焦点、集中：悬停等。

我发现这篇文章解决了我的问题，但我不想MuiThemeProvider每次都添加。

我能够在一定程度上实现它，但是当它没有聚焦时，我仍然无法在悬停时改变颜色。

https://codesandbox.io/s/kx0zx9q7jo

Answer 1

似乎您的根样式在某些时候被覆盖了。也许它不是理想的解决方案，但我让它与!important关键字一起使用：

"&:hover:not($disabled):not($focused):not($error) $notchedOutline": {
  borderColor: "red !important"
}