It appears that Input background styles are not applied using baseStyles because variants take precedence over baseStyles, with each variant often setting the background to 'transparent'. This behavior is not considered a bug and is mentioned in the documentation:
Pro tip 💡: To view the parts of a multipart component, you can click on the "View theme source" button at the top of the documentation page for that specific component.
To customize the default theme of a variant, you only need to define the parts you want to change, which will then be combined with the default styles for that variant.
You can refer to the source code for Input here: https://github.com/chakra-ui/chakra-ui/blob/%40chakra-ui/react%402.4.2/packages/components/theme/src/components/input.ts#L115
Credit goes to previous answers for guiding us in the right direction!
const variantFilled = {
field: {
bg: "red.500", // combined with the default styles for `filled`
/*// default styles:
border: "2px solid",
borderColor: "transparent",
bg: mode("gray.100", "whiteAlpha.50")(props),
_hover: {
bg: mode("gray.200", "whiteAlpha.100")(props),
},
_readOnly: {
boxShadow: "none !important",
userSelect: "all",
},
_invalid: {
borderColor: getColor(theme, ec),
},
_focusVisible: {
bg: "transparent",
borderColor: getColor(theme, fc),
},
*/
},
addon: {
/*
border: "2px solid",
borderColor: "transparent",
bg: mode("gray.100", "whiteAlpha.50")(props),
*/
},
};
export const theme = extendTheme({
components: {
Input: {
variants: { filled: variantFilled },
},
},
});
If you require access to props for mode toggling:
Documentation: Component Style > Styling multipart components
import { inputAnatomy } from "@chakra-ui/anatomy";
import { createMultiStyleConfigHelpers, extendTheme } from "@chakra-ui/react";
import { mode } from "@chakra-ui/theme-tools"
const { definePartsStyle } = createMultiStyleConfigHelpers(inputAnatomy.keys);
const variantFilled = definePartsStyle((props) => ({
field: {
bg: mode("gray.100", "whiteAlpha.50")(props),
}
}))