Question

我的React应用程序中有一个MaterialUI InputBase元素。如果我打开autoComplete属性，则填充后输入的样式就会“混乱”。我也尝试了Input组件，同样的问题。

我尝试在全局CSS文件中覆盖这些伪元素：

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

这没有效果，可能是因为原始代码也使用！important关键字，因此它的优先级高于我的关键字。我无法创建优先级更高的ID，因为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骇客来完成这项工作吗？

MaterialUI：如何在InputBase组件中覆盖webkit-autofill样式？

0 个答案: