Material-UI Input 組件下划線顏色

Question

我正在嘗試制作一個帶有白色下划線的輸入組件。 目前，當用戶將鼠標懸停在組件上時，下划線顏色變為黑色。 我希望這是白色的。 我相信這應該可以通過覆蓋演示中和下面概述的下划線類來實現。 不幸的是，它似乎不起作用，但是如果我在瀏覽器中手動檢查樣式並刪除下面的行，它會在瀏覽器中按預期工作。

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

Answer 1

我看了一下源代碼，他們正在做這樣的事情

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

這個對我有用。

Answer 2

受到 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}
/>

Answer 3

首先，像這樣添加您的輸入

<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;
}

在此之前，您將獲得始終可見的下划線訪問權限，之后將為您提供點擊后下划線訪問權限。 現在做你想做的

Answer 4

像這樣嘗試

.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;
}