英文:
Material UI: Hover colour doesn't change until values are changed and saved again
问题
我有一个用于 MUI TextField 的代码。当我运行代码并悬停在条形上时，颜色仍然保持默认颜色，即```rgba(0, 0, 0, 0.87)```。只有在我改变```sx```内的某个值并保存文件（重新编译项目）后，悬停时它才会变成蓝色。
```jsx
<TextField
shrink="false"
id="outlined-basic"
variant="standard"
sx = {{
minWidth:"28%",
minHeight:"50px",
maxWidth:"28%",
maxHeight:"50px",
marginTop:"2vh",
'& .MuiInput-underline:before': {
borderBottomColor: 'tomato',
},
'& .MuiInput-underline:hover:before': {
borderBottomColor: 'blue',
},
'& .MuiInput-underline:after': {
borderBottomColor: 'green',
},
}}>
</TextField>
例如，改变minWidth的值，然后重新编译将使其正常工作，但改变variant的值则不会。为什么会发生这种情况，我该如何解决？谢谢！
<details>
<summary>英文:</summary>
I have the following code for an MUI TextField. When I run my code and hover over the bar, the color remains the default colour, which is ```rgba(0, 0, 0, 0.87)```. Only when I change the value of something inside ```sx``` and save the file (recompiling the project) does it turn up blue on hover.
<TextField
shrink="false"
id="outlined-basic"
variant="standard"
sx = {{
minWidth:"28%",
minHeight:"50px",
maxWidth:"28%",
maxHeight:"50px",
marginTop:"2vh",
'& .MuiInput-underline:before': {
borderBottomColor: 'tomato',
},
'& .MuiInput-underline:hover:before': {
borderBottomColor: 'blue',
},
'& .MuiInput-underline:after': {
borderBottomColor: 'green',
},
}}>
</TextField>
For example, changing the value of ```minWidth``` and then recompiling will make it work properly, but changing the value of ```variant``` does not. Why does this happen and how can I fix it? Thanks!
</details>
# 答案1
**得分**: 1
关于重新编译时的奇怪行为，我没有答案。但是，可以通过为 ::before 伪元素应用下面的 **sx** 样式来解决问题。需要更多的类以增加特异性，并且 `:hover` 和 `::before` 的顺序很重要。
```jsx
'& .MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-formControl::before': {
borderBottomColor: 'tomato'
},
'& .MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-formControl:hover::before': {
borderBottomColor: 'blue'
},
英文:
As for the strange behavior with recompiling, I don't have an answer. But, the problem can be fixed by applying the sx styles below for the ::before pseudo-element. More classes are needed for specificity, and the order of :hover and ::before matters.
'& .MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-formControl::before': {
borderBottomColor: 'tomato'
},
'& .MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-formControl:hover::before': {
borderBottomColor: 'blue'
},
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论