Цвет подчеркивания компонента ввода Material-UI

Я пытаюсь сделать компонент ввода с белым подчеркиванием. В настоящее время, когда пользователь наводит курсор на компонент, цвет подчеркивания меняется на черный. Я ожидал, что это будет белый. Я считаю, что это должно быть возможно путем переопределения класса подчеркивания, как в демонстрации и показано ниже. К сожалению, похоже, это не работает, но если я проверю стили вручную в браузере и удалю строку ниже, она будет работать в браузере, как и ожидалось.

Пример: 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);

Стиль класса overide, который я использую:

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

material-ui css jss
person Chris    schedule 06.06.2018    source источник

Ответы (4)


arrow_upward
-2
arrow_downward

попробуй так

.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;
}
person Hardik Prajapati    schedule 06.06.2018
comment
Я попытался добавить !important, но это ничего не изменило. - person Chris; 06.06.2018
comment
скопируйте этот класс и добавьте его в свой css - person Hardik Prajapati; 06.06.2018
comment
См. Index.html в разделе ‹style›‹/style›. - person Hardik Prajapati; 06.06.2018
comment
После повторной попытки добавление !important, кажется, работает. - person Chris; 06.06.2018

arrow_upward
9
arrow_downward

Я взглянул на исходный код, и они делают что-то вроде этого

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

Меня устраивает.

person Guillaume Bastianelli    schedule 13.06.2018
comment
Благодарю вас! К сожалению, просто :hover не работает. - person Martin Konicek; 16.01.2020

arrow_upward
5
arrow_downward

Вдохновленный ответом Гийома, вот мой рабочий код, упрощенный, если вас не волнует состояние ошибки:

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}
/>
person Martin Konicek    schedule 16.01.2020
comment
Наконец-то нашел правильный ответ, почему 0 голосов, хотя - person steve moretz; 10.06.2020

arrow_upward
0
arrow_downward

Сначала добавьте свой ввод следующим образом

<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 предоставит вам доступ к подчеркиванию после клика. Теперь просто делай, что хочешь

person moshfiqrony    schedule 05.07.2020