Цвет подчеркивания компонента ввода Material-UI Input
Я пытаюсь создать компонент ввода с белым подчеркиванием. В настоящее время, когда пользователь наводит курсор на компонент, цвет подчеркивания меняется на черный. Я ожидал, что это будет белым. Я считаю, что это должно быть возможно, переопределив класс подчеркивания, как в демонстрации и обрисовано в общих чертах ниже. К сожалению, похоже, что это не работает, но если я проверю стили вручную в браузере и удалю строку ниже, в браузере все будет работать должным образом.
Пример: 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`,
},
Ответы 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;
}
скопируйте этот класс и вредитель в свой css
См. Index.html в <style> </style>
После повторной попытки добавление! Important, похоже, работает.
Я взглянул на исходный код, и они делают что-то вроде этого
{
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}`
}
}
Меня устраивает.
Спасибо! К сожалению, просто: hover не работает.
Вдохновленный ответом Гийома, вот мой рабочий код, упрощенный, если вас не волнует состояние ошибки:
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}
/>
Наконец-то нашел правильный ответ, почему 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;
}
Здесь перед предоставит вам всегда видимый доступ к подчеркиванию, а после предоставит вам доступ к подчеркиванию после щелчка. Теперь просто делай то, что хочешь
Я пробовал добавить! Important, но ничего не изменилось