DEV Community

Discussion on: Getting Started with styled-components 💅

View post
Collapse
 
loizoskounios profile image
Loizos Kounios •

Thanks a lot for the guide!

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/theme/globalStyle.js:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,900|Roboto');

  body {
    padding: 0;
    margin: 0;
    font-family: Roboto, sans-serif;
  }

  h1 {
    font-family: Montserrat, serif;
  }
`

export { GlobalStyle };
Enter fullscreen mode Exit fullscreen mode

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 */

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <GlobalStyle />
        <AppWrapper>
          <AppHeader>
            <AppLogo src={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>{' '}
            <EmojiWrapper aria-label="nail polish">💅</EmojiWrapper>
          </AppIntro>
        </AppWrapper>
      </React.Fragment>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
spences10 profile image
Scott Spence •

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.