[英]Material-UI Input component underline color
I am trying to make an input component that has a white underline.我正在尝试制作一个带有白色下划线的输入组件。 Currently, when the user hovers over the component, the underline color changes to black.
目前,当用户将鼠标悬停在组件上时,下划线颜色变为黑色。 I would expect this be white.
我希望这是白色的。 I believe this should be possible by overriding the underline class as in the demo and outlined below.
我相信这应该可以通过覆盖演示中和下面概述的下划线类来实现。 Unfortunately, it doesn't seem to work, but if I inspect the styles manually in the browser and remove the below line it works as expected in the browser.
不幸的是,它似乎不起作用,但是如果我在浏览器中手动检查样式并删除下面的行,它会在浏览器中按预期工作。
Example: https://stackblitz.com/edit/yjpf5s (View: https://yjpf5s.stackblitz.io )示例: https : //stackblitz.com/edit/yjpf5s (查看: https : //yjpf5s.stackblitz.io )
Style removed manually in browser to obtain desired functionality:在浏览器中手动删除样式以获得所需的功能:
.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);
The overide class style I am using:我正在使用的覆盖类样式:
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}`,
},
},
Edit: Here is the solution that ended up working:编辑:这是最终工作的解决方案:
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: `2px solid ${palette.common.white} !important`,
},
I took a look at the source code and they are doing something like this我看了一下源代码,他们正在做这样的事情
{
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}`
}
}
It works for me.这个对我有用。
Inspired by Guillaume's answer, here is my working code, simplified if you don't care about error state:受到 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);
Use:用:
<WhiteTextField
fullWidth
onChange={this.handleNameChange}
value={this.props.name}
/>
At first, add your input like this首先,像这样添加您的输入
<Input {...props} className='myClass' />
Now in your CSS现在在你的 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;
}
Here before will give you the always visible underline access and after will give you the after click underline access.在此之前,您将获得始终可见的下划线访问权限,之后将为您提供点击后下划线访问权限。 Now just do what you want
现在做你想做的
try like this像这样尝试
.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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.