For your information, I ran into trouble with injectGlobal since it has been replaced by createGlobalStyle in styled-components v4. createGlobalStyle is not backwards compatible. Below is how I managed to fix the issue in case anyone else is following this guide with styled-components v4.
In src/App.js, I import GlobalStyle and load it before AppWrapper. Both GlobalStyle and AppWrapper are themselves wrapped in React.Fragment as that's what the styled-components docs recommend.
/* stuff */import{GlobalStyle}from'./theme/globalStyle';/* stuff */classAppextendsComponent{render(){return(<React.Fragment><GlobalStyle/><AppWrapper><AppHeader><AppLogosrc={logo}alt="logo"/><AppTitle>Welcome to React</AppTitle></AppHeader><AppIntro>
Bootstrapped with <code>create-react-app</code>.
</AppIntro><AppIntro>
Components styled with <code>styled-components</code>{''}<EmojiWrapperaria-label="nail polish">💅</EmojiWrapper></AppIntro></AppWrapper></React.Fragment>);}}
Thanks a lot for the guide!
For your information, I ran into trouble with
injectGlobal
since it has been replaced bycreateGlobalStyle
instyled-components
v4.createGlobalStyle
is not backwards compatible. Below is how I managed to fix the issue in case anyone else is following this guide withstyled-components
v4.In
src/theme/globalStyle.js
:In
src/App.js
, I importGlobalStyle
and load it beforeAppWrapper
. BothGlobalStyle
andAppWrapper
are themselves wrapped inReact.Fragment
as that's what thestyled-components
docs recommend.Hey! Thanks for this I was just about to add in the requisite versions for this and on the Medium post to avoid any confusion.