75 lines
3.0 KiB
Markdown
75 lines
3.0 KiB
Markdown
|
---
|
|||
|
|
title: Gatsby.js Styling
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Gatsby.js Styling
|
|||
|
|
|
|||
|
|
There are so many ways to add styles to your website — and Gatsby supports almost every possible option, through official and community plugins.
|
|||
|
|
|
|||
|
|
NOTE: Gatsby doesn’t prescribe or dictate any single styling approach. Choose what works best for you!
|
|||
|
|
|
|||
|
|
## Layout Components
|
|||
|
|
|
|||
|
|
For sections of your site that you want to share across multiple pages. Creating and using the component as shown below.
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
// src/components/layout.js
|
|||
|
|
|
|||
|
|
import React from "react"
|
|||
|
|
|
|||
|
|
export default ({ children }) => (
|
|||
|
|
<div style={{ margin: `0 auto`, maxWidth: 650, padding: `0 1rem` }}>
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
// src/pages/index.js
|
|||
|
|
|
|||
|
|
import React from "react"
|
|||
|
|
import Layout from "../components/layout"
|
|||
|
|
|
|||
|
|
export default () => (
|
|||
|
|
<Layout>
|
|||
|
|
<h1>I’m in a layout!</h1>
|
|||
|
|
</Layout>
|
|||
|
|
)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## CSS Modules
|
|||
|
|
|
|||
|
|
CSS Modules are highly recommended for those new to building with Gatsby (and React in general). A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. They are very popular as they let you write CSS like normal but with a lot more safety. The tool automatically makes class and animation names unique so you don’t have to worry about selector name collisions.
|
|||
|
|
|
|||
|
|
Check (CSS Modules homepage here](https://github.com/css-modules/css-modules).
|
|||
|
|
|
|||
|
|
## Typography.js
|
|||
|
|
|
|||
|
|
Typography.js is a JavaScript library that enables you to define and explore the typographic design of your website and define beautiful custom and pre-existing typographic themes. It limits the number of tedious changes you need to make to your website just to change the font.
|
|||
|
|
|
|||
|
|
Learn [how to use Typography.js on your Gatsby site here](https://www.gatsbyjs.org/docs/typography-js/).
|
|||
|
|
|
|||
|
|
## Using CSS-in-JS
|
|||
|
|
|
|||
|
|
With CSS-in-JS, you avoid all that as CSS selectors are scoped automatically to their component. Styles are tightly coupled with their components. This makes it easier to know how to edit a component’s CSS as there’s never any confusion about how and where CSS is being used.
|
|||
|
|
|
|||
|
|
### Glamor
|
|||
|
|
|
|||
|
|
Check out [walkthrough guide on setting up Glamor on your Gatsby site](https://www.gatsbyjs.org/docs/glamor/)
|
|||
|
|
|
|||
|
|
### Styled components
|
|||
|
|
|
|||
|
|
Check out [walkthrough guide on setting up Styled Components on your Gatsby site](https://www.gatsbyjs.org/docs/styled-components/)
|
|||
|
|
|
|||
|
|
## Creating global styles
|
|||
|
|
|
|||
|
|
In nearly every site, there will be some global styles, such as a reset or typography defaults. Check out the [guide at official Gatsby docs for creating global styles](https://www.gatsbyjs.org/docs/creating-global-styles/).
|
|||
|
|
|
|||
|
|
|
|||
|
|
## PostCSS
|
|||
|
|
|
|||
|
|
PostCSS transforms extended syntaxes and features into modern, browser-friendly CSS. Checkout guide will [show you how to get started with Gatsby and PostCSS](https://www.gatsbyjs.org/docs/post-css/).
|
|||
|
|
|
|||
|
|
### More Information:
|
|||
|
|
Check out the Gatsby.js official docs for styling at [Gatsby Styling](https://www.gatsbyjs.org/docs/styling/). For more information and learn more, visit: [Gatsby.js official site](https://www.gatsbyjs.org/tutorial/)
|