Does extendTheme deep merge component variants without overwriting existing defaults?
0 reputation · 06 Feb 2024, 20:16 UTC
When customizing a Chakra UI theme (v2), the extendTheme function is used to merge user-defined configurations with the default theme. While this function performs a deep merge, there is uncertainty regarding the behavior of the components object when defining specific variants.
The goal is to add a new custom variant to a component while ensuring that the default variants provided by Chakra UI remain available and intact. If the merge logic treats the variants object as a replacement rather than an addition, existing default styles may be lost.
Constraints
- Targeting
@chakra-ui/reactv2.x. - Focusing on the
componentsnesting structure. - Avoiding the manual re-definition of all default theme tokens.
Does extendTheme preserve default component variants when a new variant is added to the theme object? Which specific structure is required to ensure that the merge adds to the existing variant list rather than replacing the entire variants object?