Material-UI输入组件下划线颜色
Material-UI Input component underline color
我正在尝试制作一个带有白色下划线的输入组件。目前,当用户将鼠标悬停在组件上时,下划线颜色变为黑色。我希望这是白色的。我相信这应该可以通过覆盖演示中的下划线 class 来实现,并在下面概述。不幸的是,它似乎不起作用,但如果我在浏览器中手动检查样式并删除下面的行,它将在浏览器中按预期工作。
示例:https://stackblitz.com/edit/yjpf5s (View: 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);
我正在使用的覆盖 class 样式:
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`,
},
这样试试
.MuiInput-underline-24:hover:not(.MuiInput-disabled-23):not(.MuiInput-focused-22):not(.MuiInput-error-25):before {
border-bottom: 2px solid rgb(255, 255, 255) !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}`
}
}
对我有用。
受 Guillaume 的回答启发,这是我的工作代码,如果您不关心错误状态,则进行了简化:
const WhiteTextField = withStyles({
root: {
'& .MuiInputBase-input': {
color: '#fff', // Text color
},
'& .MuiInput-underline:before': {
borderBottomColor: '#fff8', // Semi-transparent underline
},
'& .MuiInput-underline:hover:before': {
borderBottomColor: '#fff', // Solid underline on hover
},
'& .MuiInput-underline:after': {
borderBottomColor: '#fff', // Solid underline on focus
},
},
})(TextField);
使用:
<WhiteTextField
fullWidth
onChange={this.handleNameChange}
value={this.props.name}
/>
首先,像这样添加你的输入
<Input {...props} className='myClass' />
现在在你的 CSS
.gc-input-bottom::after{
border-bottom: 2px solid $input-border-color-active!important;
:hover{
border-bottom: none!important;
}
}
.gc-input-bottom::before{
border-bottom: 1px solid $input-border-bottom-color!important;
}
此处 before 将为您提供始终可见的下划线访问权限,after 将为您提供点击后下划线访问权限。现在就做你想做的
我正在尝试制作一个带有白色下划线的输入组件。目前,当用户将鼠标悬停在组件上时,下划线颜色变为黑色。我希望这是白色的。我相信这应该可以通过覆盖演示中的下划线 class 来实现,并在下面概述。不幸的是,它似乎不起作用,但如果我在浏览器中手动检查样式并删除下面的行,它将在浏览器中按预期工作。
示例:https://stackblitz.com/edit/yjpf5s (View: 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);
我正在使用的覆盖 class 样式:
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`,
},
这样试试
.MuiInput-underline-24:hover:not(.MuiInput-disabled-23):not(.MuiInput-focused-22):not(.MuiInput-error-25):before {
border-bottom: 2px solid rgb(255, 255, 255) !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}`
}
}
对我有用。
受 Guillaume 的回答启发,这是我的工作代码,如果您不关心错误状态,则进行了简化:
const WhiteTextField = withStyles({
root: {
'& .MuiInputBase-input': {
color: '#fff', // Text color
},
'& .MuiInput-underline:before': {
borderBottomColor: '#fff8', // Semi-transparent underline
},
'& .MuiInput-underline:hover:before': {
borderBottomColor: '#fff', // Solid underline on hover
},
'& .MuiInput-underline:after': {
borderBottomColor: '#fff', // Solid underline on focus
},
},
})(TextField);
使用:
<WhiteTextField
fullWidth
onChange={this.handleNameChange}
value={this.props.name}
/>
首先,像这样添加你的输入
<Input {...props} className='myClass' />
现在在你的 CSS
.gc-input-bottom::after{
border-bottom: 2px solid $input-border-color-active!important;
:hover{
border-bottom: none!important;
}
}
.gc-input-bottom::before{
border-bottom: 1px solid $input-border-bottom-color!important;
}
此处 before 将为您提供始终可见的下划线访问权限,after 将为您提供点击后下划线访问权限。现在就做你想做的