DEV Community

Discussion on: how to theme your gatsby site

View post
Collapse
 
kira profile image
Kira •

Hi, I used the same way to build my theme, however, the children component inside couldn't get ThemeContext... Do you know how to solve it?

Collapse
 
josepplloo profile image
Jose Miguel •

Hi! Could you please show me a snippet of code?
Maybe you have to assign some css classes to the children

Collapse
 
kira profile image
Kira •

Hi, I found the solution. Before, I wrapped ThemeContext inside layout

export const Layout = (props)=>{
    <ThemeContext.Provider value={themes}>
    <Header/>
        {props.children}
    <Footer/>
    </ThemeContext.Provider>
}
Enter fullscreen mode Exit fullscreen mode

Then in my page Blog, I coudln't get themeContext

export const Page = ()=>{
    const themes = useContext(ThemeContext) //can't get the value
    ...

    return (
        <Layout>
            page
        </Layout>
    )
}
Enter fullscreen mode Exit fullscreen mode

The solution is to create a wrapRootElement in gatsby-browser.js. Then all pages could get ThemeContext's value.

const wrapRootElement =({element})=>{
    return(
    <ThemeContext.Provider value={themes}>
        {element}    
    </ThemeContext.Provider>
    )
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
josepplloo profile image
Jose Miguel •

Also look that I only themed the Header component, Main and Footer components need the prop theme or reach themes via useContext