11

我正在尝试制作一个带有白色下划线的输入组件。目前，当用户将鼠标悬停在组件上时，下划线颜色会变为黑色。我希望这是白色的。我相信这应该可以通过覆盖演示中的下划线类来实现，如下所述。不幸的是，它似乎不起作用，但如果我在浏览器中手动检查样式并删除下面的行，它会在浏览器中按预期工作。

示例：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`,
},
4

4 回答 4

10

我看了一下源代码，他们正在做这样的事情

{
   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}`
    }
}

这个对我有用。

于 2018-06-13T15:10:53.833 回答
8

受纪尧姆回答的启发，这是我的工作代码，如果您不关心错误状态，则简化：

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}
/>
于 2020-01-16T16:09:12.967 回答
0

首先，像这样添加您的输入

<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将为您提供单击后下划线访问权限。现在做你想做的

于 2020-07-05T12:16:15.540 回答
-2

试试这样

.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;
}
于 2018-06-06T11:46:35.063 回答