Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions docs/tutorial/part-two/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -347,17 +347,30 @@ Gatsby works out of the box with CSS Modules.

Let's build a page using CSS Modules.

First, let's create a new `Container` component which we'll use for each of the
CSS-in-JS examples. Create a new directory at `src/components` and then, in this new directory, create a file named `container.js` and paste the following:
First, let's create a new `Container` component. Create a new directory at
`src/components` and then, in this new directory, create a file named
`container.js` and paste the following:

```javascript
import React from "react"
import containerStyles from './container.module.css'

export default ({ children }) => (
<div style={{ margin: "3rem auto", maxWidth: 600 }}>{children}</div>
<div className={containerStyles.container}>{children}</div>
)
```

You'll notice we imported a css modules file named `container.module.css`. Let's make that.

In the same directory, create the `container.module.css` file and paste in it:

```css
.container {
margin: 3rem auto;
max-width: 600px;
}
```

Then, create a new page component by creating a file at
`src/pages/about-css-modules.js`:

Expand Down