How can I overwrite styles of an autofilled input when using Chakra UI?

Question

I'm styling my inputs inside Chakra UI's extendTheme function however I'm struggling to style an input that has been autocompleted. Using the :autofill pseudo selector doesn't seem to have any bearing because the browser (Chrome) has its own styles set with !important which forces the input's background colour to be white.

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

Just incase anyone has the same issue, I couldn't figure out how to override the default browser background-color, so instead I gave it a box-shadow value that creates a similar effect. Box-shadow is not set by the browser's autofill styles so this works well for my case.

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

Answer 2

As TommyR's answer explains, this is currently broken in Chakra UI.

However, this does work in variants.

A somewhat clean fix would be to create a variant for this, and set it as a defaultProp:

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

If wanted, you could extend other existing variants, like so:

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