MaterialUI: Как переопределить стили webkit-autofill в компоненте InputBase? - PullRequest
Новая
       8

MaterialUI: Как переопределить стили webkit-autofill в компоненте InputBase?

1 голос
/ 02 апреля 2019

В моем приложении React есть элемент MaterialUI InputBase. Если я включу свойство autoComplete, стили ввода «испортятся», как только они будут заполнены. Я также попытался компонент ввода, с той же проблемой.

Я попытался переопределить эти псевдоэлементы в моем глобальном файле CSS: 

input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    color:white !important;
}

Это не имеет никакого эффекта, возможно, потому что в исходном коде также используется ключевое слово! Important, что придает ему приоритет над моим. Я не могу создать идентификатор, который будет иметь более высокий приоритет, потому что MaterialUI не предоставляет эту опцию.

У меня нет ничего особенного в моей настройке. Это стили, которые внедряются с помощью WithStyles, и я сомневаюсь, что они как-то связаны с этим: 

inputRoot: {
            color: 'inherit',
            width: '100%',
        },
        inputInput: {

            paddingTop: theme.spacing.unit,
            paddingRight: theme.spacing.unit,
            paddingBottom: theme.spacing.unit,
            paddingLeft: theme.spacing.unit * 10,
            transition: theme.transitions.create('width'),
            width: '100%',           
            [theme.breakpoints.up('md')]: {
                width: 200,
            },
        },
        inputInputQuery: {


            paddingTop: theme.spacing.unit,
            paddingRight: theme.spacing.unit,
            paddingBottom: theme.spacing.unit,
            paddingLeft: theme.spacing.unit,
            transition: theme.transitions.create('width'),
            width: '100%',
            [theme.breakpoints.up('md')]: {
                width: 200,
            },
        },

Есть ли способ сделать это, не прибегая к взлому JS?

...