Outline
We talked in the last video about why scoped CSS would be really nice. It's easier to maintain, cleaner to write, and prevents naming conflicts.
There are a couple of ways to get scoped CSS in Gatsby. The first is called CSS modules. A CSS Module is a CSS file in which all class names are scoped locally by default. Gatsby supports CSS modules out of the box.
Let's use a CSS module with the NavBar
. First, create a file under src/components
called navbar.module.css
.
Cut and paste the nav-link
class we made in the global styles.css
file into navbar.module.css
. We're going to rename this class to camel case to make importing it easier:
.navLink {
font-family: Verdana, Helvetica, sans-serif;
font-size: 1.2rem;
padding: 0.8rem;
text-decoration: none;
}
Now, back in NavBar.js
, import the styles from the module:
import navBarStyles from "./navbar.module.css"
It's sort of a convention of CSS modules to tack Styles
onto the end of the name of the styles, but we could call this whatever we want.
To use the imported styles, change the className
input to className={navBarStyles.navLink}
on each link.
If you refresh the page, you should be able to see your navLink
class in action! When you inspect the link tag, you should see something like navbar-module--navLink--vqJ05
as the class. This is how CSS modules scopes CSS; it generates a unique class name using the module and a random series of characters. Even if we were to create a different navLink
class in another module, the two wouldn't conflict. Pretty awesome!
Let's do a quick assignment about CSS modules.