Creating Global Styles with Styled Components

Sara Vieira
InstructorSara Vieira

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 2 years ago

We will create global styles that apply to the whole document using the styled-components library.

We create a global style using the createGlobalStyle keyword and set that to a variable. Inside of that variable, we can now set our custom styles. We wrap our application in inside of a fragment, <>, and put our new global style up at the top, just below the fragment.

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.