Styled Components - hdknr/gatsby-home GitHub Wiki

Setup Styled Components

Styled Components (​https://styled-components.com/​) is visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Step 1 / 4
Install necessary NPM packages

Proposed changes

NPMPackage:
 * Install gatsby-plugin-styled-components@latest

NPMPackage:
 * Install styled-components@latest

NPMPackage:
 * Install babel-plugin-styled-components@latest

✅ Installed NPM package [email protected]
✅ Installed NPM package [email protected]
✅ Installed NPM package [email protected]

Step 2 / 4
Install the Styled Components plugin in gatsby-config.js

Proposed changes

GatsbyPlugin:
 * Install gatsby-plugin-styled-components in gatsby-config.js
---
- Original  - 0
+ Modified  + 1

@@ -30,6 +30,7 @@
          whitelist: ["emoji"],
        },
      },
+     "gatsby-plugin-styled-components",
    ],
  }

---



Step 3 / 4
Sweet, now it's ready to go.

Let's also write out an example page you can use to play with Styled Components.

Proposed changes

File:
 * Write src/pages/styled-components-example.js
---
- Original  -  0
+ Modified  + 45

+ import React from "react"
+ import styled from "styled-components"
+
+ const Container = styled.div`
+   margin: 3rem auto;
+   max-width: 600px;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+ `
+
+ const Avatar = styled.img`
+   flex: 0 0 96px;
+   width: 96px;
+   height: 96px;
+   margin: 0;
+ `
+
+ const Username = styled.h2`
+   margin: 0 0 12px 0;
+   padding: 0;
+ `
+
+ const User = props => (
+   <>
+     <Avatar src={props.avatar} alt={props.username} />
+     <Username>{props.username}</Username>
+   </>
+ )
+
+ export default () => (
+   <Container>
+     <h1>About Styled Components</h1>
+     <p>Styled Components is cool</p>
+     <User
+       username="Jane Doe"
+       avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adel
lecharles/128.jpg"
+     />
+     <User
+       username="Bob Smith"
+       avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vlad
arbatov/128.jpg"
+     />
+   </Container>
+ )
---
Step 3
Sweet, now it's ready to go.

Let's also write out an example page you can use to play with Styled Components.

✅ Wrote file src/pages/styled-components-example.js

Step 4 / 4
Read more about Styled Components on the official docs site:

https://styled-components.com/ (​https://styled-components.com/​)

The recipe finished successfully!

✅ Installed NPM package [email protected]
✅ Installed NPM package [email protected]
✅ Installed NPM package [email protected]
✅ Installed gatsby-plugin-styled-components in gatsby-config.js
✅ Wrote file src/pages/styled-components-example.js