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

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

попробуйте вот так

.MuiInput-underline-24: hover: нет (.MuiInput-disabled-23): нет (.MuiInput -ocucted-22): нет (.MuiInput-error-25): before {border-bottom: 2px solid rgb (255, 255, 255)! важный;}