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 &&
      background: purple;
      color: white;

Notice this function:

${props =>
    props.primary &&
      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 primary>Hi!</Button>

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!


I finished! On to the next chapter