reactjs 材质UI：悬停颜色不会更改，直到值被更改并再次保存

h43kikqp 于 2023-04-11 发布在 React

关注(0)|答案(1)|浏览(141)

我有一个MUI TextField的以下代码。当我运行我的代码并将鼠标悬停在栏上时，颜色仍然是默认颜色，即rgba(0, 0, 0, 0.87)。只有当我更改sx中的某些值并保存文件（重新编译项目）时，悬停时它才会变成蓝色。

<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的值不会。为什么会发生这种情况，我如何修复它？谢谢！

reactjs

来源：https://stackoverflow.com/questions/75953603/material-ui-hover-colour-doesnt-change-until-values-are-changed-and-saved-agai

1条答案

按热度按时间

smdnsysy1#

至于重新编译的奇怪行为，我没有答案。但是，这个问题可以通过为**：：before伪元素应用下面的sx**样式来解决。需要更多的类来实现特定性，:hover和::before的顺序很重要。

'& .MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-formControl::before': {
    borderBottomColor: 'tomato'
},
'& .MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-formControl:hover::before': {
    borderBottomColor: 'blue'
},

赞(0）回复(0）举报 2023-04-11

我来回答

reactjs 材质UI：悬停颜色不会更改，直到值被更改并再次保存

1条答案

相关问题

热门标签

最新问答