使用 Chakra UI 时如何覆盖自动填充输入的样式？答案

【问题标题】：How can I overwrite styles of an autofilled input when using Chakra UI?使用 Chakra UI 时如何覆盖自动填充输入的样式？
【发布时间】：2022-03-31 21:56:18
【问题描述】：

我在 Chakra UI's extendTheme function 中设置我的输入样式，但是我正在努力设置自动完成的输入样式。使用 :autofill 伪选择器似乎没有任何意义，因为浏览器 (Chrome) 使用 !important 设置了自己的样式，这会强制输入的背景颜色为白色。

const theme = extendTheme({
  components: {
    Input: {
      baseStyle: {
         field: {
            bg: "gray.700",
            color: "gray.300",
            _hover: {
              bg: "gray.500",
            },
            _focus: {
              bg: "gray.500",
            },
            // This does not work
            _autofill: {
              bg: "gray.500",
            }
         }
      }
    }
  }
})

【问题讨论】：

标签： css google-chrome emotion chakra-ui

【解决方案1】：

万一有人遇到同样的问题，我不知道如何覆盖默认浏览器background-color，所以我给了它一个box-shadow 值，以产生类似的效果。盒子阴影不是由浏览器的自动填充样式设置的，所以这很适合我的情况。

const theme = extendTheme({
  components: {
    Input: {
      baseStyle: {
         field: {
            bg: "gray.700",
            color: "gray.300",
            _hover: {
              bg: "gray.500",
            },
            _focus: {
              bg: "gray.500",
            },
            _autofill: {
              border: "1px solid transparent",
              textFillColor: "#c6c6c6",
              boxShadow: "0 0 0px 1000px #232323 inset",
              transition: "background-color 5000s ease-in-out 0s",
            },
         }
      }
    }
  }
})

【讨论】：

哇，超级疯狂。谢谢你的黑客。有没有人费心向 Chakra UI 团队报告这个？这肯定会在文档中找到一些提及。

【解决方案2】：

正如TommyR's answer 解释的那样，这目前在 Chakra UI 中被破坏了。

但是，这确实适用于变体。

一个稍微干净的解决方法是为此创建一个变体，并将其设置为 defaultProp：

Input: {
  variants: {
    backgroundFix: {
      field: {
        bg: "green.500",
      },
    },
  },
  defaultProps: {
    variant: "backgroundFix",
  },
},

如果需要，您可以扩展其他现有变体，如下所示：

Input: {
  variants: {
    outlineBackgroundFix: (props) => ({
      field: {
        ...defaultTheme.components.Input.variants.outline(props).field,
        bg: props.colorMode === "light" ? "white" : "gray.800",
      },
    }),
  },
  defaultProps: {
    variant: "outlineBackgroundFix",
  },
},

【讨论】：