在材質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"
}