Outline
Now that we've installed and set up styled-components, how do we use it (or is it "them"?)?
We're going to use styled-components for our layout container.
First, cut the layout-container class from src/styles/styles.css and paste it into Layout.js. It'll break the syntax highlighting for now; that's okay.
Next, add an import under our import for React:
import styled from "styled-components"
Next, replace the layout-container class with this:
const Container = styled.div`
margin: const Container = styled.div`
margin: 3rem auto;
max-width: 650px;
padding: 0 1rem;
`
This creates a component called Container that uses the styles we created for our layout.
If you've never seen that syntax with the backticks, this is called a tagged template literal in JavaScript. Tagged template literals are sort of like shortcuts for functions and arguments. You can think of div as a function and the backticks containing the arguments. What's cool is that tagged template literals let us also pass in functions and expressions, so we can do a bunch of cool stuff in our styles. You don't need to worry too much in this course about how tagged template literals work under the hood, but if you're interested I've provided some links below.
Finally, replace the div in the exported function to use our new Container component:
export default ({ children, noHeader }) => (
<Container>
{!noHeader && <Header />}
{children}
</Container>
)
You may need to stop and restart the server with gatsby develop. I had some trouble where I had to re-run npm install after installing styled-components, so if you run into problems, give that a try.
Once the server is running, you should be able to inspect that component in the browser and see the class name generated by styled-components.
Let's get some additional practice with an assignment in the next video.