Creating Global Styles with Styled Components
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.
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
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!