ThemeProvider nested theme merging behavior
0 reputation · 15 Apr 2020, 21:28 UTC
Theme Composition in styled-components
The ThemeProvider component allows for the injection of a theme object into the component tree, enabling styled components to access these values via the theme prop. In complex application architectures, it is common to nest multiple ThemeProvider components to apply localized theme overrides to specific UI sections.
Merging Constraints
Current implementations in v5.x and v6.x utilize a shallow merge when resolving nested themes. If a nested provider contains a key that conflicts with a parent provider, the innermost value takes precedence. However, this behavior creates uncertainty when dealing with nested objects within the theme structure, as the library does not natively perform a deep merge of these objects.
Does styled-components intend to support deep merging of nested theme objects in future releases, or is the shallow merge the permanent architectural design? What is the recommended pattern for maintaining deep object properties across nested providers without manually duplicating the parent theme state?