Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Creating Global Styles with Styled Components

    Sara VieiraSara Vieira

    In this lesson, we will create global styles that apply to the whole document using the styled-components library.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: 0:01 Let's import {createGlobalStyle} from 'styled-components'. To give something a global style, I can create a const with it and remember this would be a component, so we have to start it with an uppercase. I'm going to say Global. I can type Global. It's going to be equal to createGlobalStyle.

    0:21 Anything inside of here will be styled in the entirety of the application. It would be a global style in normal CSS global style.

    0:29 I'm going to say body, and I'm going to say text-align: center. I'm also going to say font-family, and I'm going to say -apple-system. There we go. I close this.

    0:44 The way this is used is that now you have to apply it. I'm going to open a fragment here, apply it and close the fragment right here at the bottom. As soon as I do this, you can see that everything is now Arial. Just to make sure that you can still edit this, I can come here and say color: green. Now everything is terrible but aligned with a new font family.