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

Question

我正在为 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",
            }
         }
      }
    }
  }
})

Answer 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",
            },
         }
      }
    }
  }
})