Outline
You did the assignment, right? Right!?
Okay, let's add some buttons to about.js.
First, we've got to import styled-components and its css function:
import styled, { css } from "styled-components"
Next, here's the Button component:
const Button = styled.button`
margin-top: 10px;
background: white;
color: black;
font-family: Verdana, Helvetica, sans-serif;
border-radius: 5px;
font-size: 1.2rem;
${props =>
props.primary &&
css`
background: purple;
color: white;
`}
`
Notice this function:
${props =>
props.primary &&
css`
background: purple;
color: white;
`}
Here, we're accessing the props passed into the button and modify the styles dynamically. If there's a primary prop present, we'll change the background to purple.
We can use the buttons in our component like so:
export default () => (
<Layout noHeader>
<h1>About Gatsby</h1>
<NavBar />
<Button>Hi!</Button>
<Button primary>Hi!</Button>
</Layout>
)
We're not making our buttons do anything here because that doesn't really matter. Feel free to get creative. But, you can see that we've added a primary prop to the second Button. With the server running, you should see the purple background.
Phew! We've covered a lot of ground in this tutorial. Let's recap!