He estado intentando integrar ThemeProvider desde componentes con estilo en un proyecto existente. Pero se encuentra con el siguiente error al acceder a los elementos del tema en una hoja de estilo:
TypeError: Cannot read properties of undefined (reading 'sidebarImage') 10 | 315deg, 11 | ${p => p.bgColor1} 0%, 12 | ${p => p.bgColor2} 74%), > 13 | url(${(props) => props.theme.images.sidebarImage}); | ^ 14 | 15 | background-size: cover; 16 | background-repeat: no-repeat;Después de jugar un poco, encontré la fuente del problema. En el tutorial que he estado siguiendo, todos los componentes con estilo se definen en el mismo archivo que el componente que lo usa (es decir, Container se define en App.js ). En el proyecto en el que estoy trabajando, todos los componentes con estilo se definen en hojas de estilo separadas (por lo que Container estaría en App.styles.js, que luego se importa a App.js ).
Mover los componentes con estilo de App.styles.js a App.js soluciona el problema. Sin embargo, ¿sería posible dar acceso a las hojas de estilo a Themeprovider?
Una vez que obtuve el origen del problema, fue fácil de resolver. Usando la respuesta aquí , he desarrollado esta solución (aunque podría haber un mejor enfoque).
import { useTheme } from "styled-components"; ... const Sidebar = (props) => { const theme = useTheme(); ... return ( <s.SidebarContainer theme={theme} isSidebarOpen={isSidebarOpen}> <s.SidebarHeader theme={theme}> {sidebarHeader} </s.SidebarHeader> </s.SidebarContainer> )