css - Material-UI Input 组件下划线颜色
问题描述
我正在尝试制作一个带有白色下划线的输入组件。目前,当用户将鼠标悬停在组件上时,下划线颜色会变为黑色。我希望这是白色的。我相信这应该可以通过覆盖演示中的下划线类来实现,如下所述。不幸的是,它似乎不起作用,但如果我在浏览器中手动检查样式并删除下面的行,它会在浏览器中按预期工作。
示例:https ://stackblitz.com/edit/yjpf5s (查看:https ://yjpf5s.stackblitz.io )
在浏览器中手动删除样式以获得所需的功能:
.MuiInput-underline-365:hover:not(.MuiInput-disabled-364):not(.MuiInput-focused-363):not(.MuiInput-error-366):before {
border-bottom: 2px solid rgba(0, 0, 0, 0.87);
我正在使用的覆盖类样式:
underline: {
color: palette.common.white,
borderBottom: palette.common.white,
'&:after': {
borderBottom: `2px solid ${palette.common.white}`,
},
'&:focused::after': {
borderBottom: `2px solid ${palette.common.white}`,
},
'&:error::after': {
borderBottom: `2px solid ${palette.common.white}`,
},
'&:before': {
borderBottom: `1px solid ${palette.common.white}`,
},
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: `2px solid ${palette.common.white}`,
},
'&$disabled:before': {
borderBottom: `1px dotted ${palette.common.white}`,
},
},
编辑:这是最终工作的解决方案:
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: `2px solid ${palette.common.white} !important`,
},
解决方案
我看了一下源代码,他们正在做这样的事情
{
focused: {},
disabled: {},
error: {},
underline: {
'&:before': {
borderBottom: '1px solid rgba(255, 133, 51, 0.42)'
},
'&:after': {
borderBottom: `2px solid ${theme.palette.secondary.main}`
},
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: `2px solid ${theme.palette.secondary.main}`
}
}
这个对我有用。
推荐阅读
- python - 考虑到互斥项目,如何返回打乱列表?
- java - 创建对象时是否需要为两个菱形运算符指定数据类型?
- javascript - 如何使用 javascript 获取 css 变量名(键)
- r - 如何将 igraph 对象转换和配置为 JSON
- javascript - 清除 Javascript 中等效的站点数据?
- json - Facebook Graph API - 所有帐户页面 + 帖子数据
- javascript - 如何在页面刷新或页面更改时删除本地存储密钥?
- amazon-web-services - 手动触发 AWS 代码管道,而不是使用 bitbucket codestar 连接在每次提交时触发
- clojure - 在 clojure 的长函数中创建新变量
- c# - Azure IoT Edge ClientModule 无法在主机模式下连接