What is the priority order for nested component style overrides in extendTheme?
24.5K reputation · 24 Aug 2024, 09:29 UTC
When customizing a Chakra UI theme using the extendTheme utility, developers can define styles at multiple levels, including global design tokens, component base styles, and specific variants.
There is uncertainty regarding the exact resolution order when a component is defined within the components object of the theme, but also receives style props directly on the React element. Specifically, it is unclear how the internal merge logic handles conflicts between a theme-defined baseStyle and a specific variant when both target the same CSS property.
Which level of the theme hierarchy takes precedence when a variant and a baseStyle overlap? Does the component-level style prop always override the theme's variant definition regardless of the property's specificity?