Gatsby is a static web site framework that’s based on React.
We can use it to create static websites from external data sources and more.
In this article, we’ll look at how to create a site with Gatsby.
Styling with CSS
We can add global styles into the src/styles/global.css
file:
html {
background-color: green;
}
p {
color: maroon;
}
Then in gatsby-browser.js
, we add:
import "./src/styles/global.css"
to import the global styles.
Then the styles will be applied everywhere
Layout Styles
We can add the styles to the layout file so that they can be applied to all the child components.
For example, we can write:
src/components/layout.css
html {
background-color: green;
}
p {
color: maroon;
}
src/components/layout.js
import { Link } from "gatsby"
import React from "react"
import './layout.css'
export default function Layout({ children }) {
return (
<div style={{ margin: `0 auto`, maxWidth: 650, padding: `0 1rem` }}>
<Link to='/foo'>foo</Link>
<Link to='/bar'>bar</Link>
{children}
</div>
)
}
src/pages/bar.js
import React from "react"
import Layout from "../components/layout"
export default function Bar() {
return <Layout>
<div>bar</div>
</Layout>
}
src/pages/foo.js
import React from "react"
import Layout from "../components/layout"
export default function Bar() {
return <Layout>
<div>bar</div>
</Layout>
}
Then the styles will be applied to the Foo
and Bar
pages.
Styled Components
We can use the Styled Components library to create styled components with Gatsby.
To do this, we run:
npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components
to install the required packages.
Then in gatsby-config.js
, we write:
/**
* Configure your Gatsby site with this file.
*
* See: https://www.gatsbyjs.com/docs/gatsby-config/
*/
module.exports = {
/* Your site config here */
plugins: [`gatsby-plugin-styled-components`],
}
to add the plugin into our project.
Then we can use it by writing:
src/pages/index.js
import React from "react"
import styled from "styled-components"
const Container = styled.div`
margin: 3rem auto;
max-width: 700px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
`
const Avatar = styled.img`
flex: 0 0 100px;
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 function UsersList() {
return (
<Container>
<User
username="Jane Doe"
avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
/>
<User
username="Bob Jones"
avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
/>
</Container>
)
}
We create the Container
component which is a styled div.
Avatar
is a styled image. And Username
is a styled h2
component.
User
has the combination of the Avatar
and Username
components.
CSS Modules
We can use CSS modules in our Gatsby project.
To use it, we can write:
src/pages/index.module.css
.feature {
margin: 2rem auto;
max-width: 500px;
color: red;
}
src/pages/index.js
import React from "react"
import style from "./index.module.css"
export default function Home() {
return (
<section className={style.feature}>
<h1>hello world</h1>
</section>
)
}
We just import the CSS as a module into our component.
Then we can apply the classes by accessing the style
import as an object with the class name as the property name.
Conclusion
We can style our components in various ways with Gatsby.