It's been a while since I've contributed to open source, but recently I was going through the Advanced React course by Wes Bos and I hit a snag while writing a styled-components theme.

issue

Even after reading the documentation, it took me too long to figure out that <ThemeProvider> is required to return a single child node.

<ThemeProvider theme={theme}>
    <React.Fragment>
        <GlobalStyle />
        <StyledPage>
            <Meta />
            <Header />
            <Container>{this.props.children}</Container>
        </StyledPage>
    </React.Fragment>
</ThemeProvider>

discuss

I thought there was some room for improvement in the documentation to call this out more clearly, so I headed to the styled-components Spectrum community to talk about my situation.

I started a new thread and it turns out that I wasn't the only one confused by this. Max Stoiber, one of the maintainers, was very supportive!

enhance

The change was simple, I added a little blurb to the theming documentation calling out the single child node requirement and offering a bit of explanation.

I made a pull request containing the changes and Max approved and merged it within eight hours. The changes are live right now!

contribute!

The entire open source process was very easy thanks to the styled-components contribution documentation, Spectrum community, and maintainers.

🖤 Thank you to all who helped me!

Hopefully this goes to show you that all open source contributions are valued, even minor documentation updates. It's not as difficult as you think, so I encourage you to go out and contribute!