Creating Global Styles with Styled Components

Sara Vieira
InstructorSara Vieira
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 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.

egghead
egghead
~ 20 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today