DEV Community

Discussion on: Getting Started with styled-components 💅

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(',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 (
        <GlobalStyle />
            <AppLogo src={logo} alt="logo" />
            <AppTitle>Welcome to React</AppTitle>
            Bootstrapped with <code>create-react-app</code>.
            Components styled with <code>styled-components</code>{' '}
            <EmojiWrapper aria-label="nail polish">💅</EmojiWrapper>
Enter fullscreen mode Exit fullscreen mode
spences10 profile image
Scott Spence Author

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.