Posted on May 31, 2019

How I met your Gatsby - Day 1 && Day 2

#challenge #gatsby #blogging #30daysofgatsby

I tried out styling the components this time. I copy pasted

1) Styling a component using CSS Modules
2) Building a new page using CSS Modules

Seemed interesting. The working of props and imported variables are kind of cool.

 import React from "react" import styles from "./about-css-modules.module.css" import Container from "../components/container" console.log(styles) const User = props => ( <div className={styles.user}> <img src={props.avatar} className={styles.avatar} alt="" /> <div className={styles.description}> <h2 className={styles.username}>{props.username}</h2> <p className={styles.excerpt}>{props.excerpt}</p> </div> </div> ) export default () => ( <Container> <h1>About CSS Modules</h1> <p>CSS Modules are cool</p> <User username="Jane Doe" avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg" excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit." /> <User username="Bob Smith" avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg" excerpt="I'm Bob Smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit." /> </Container> )