Solution: CSS Modules

Let's use CSS modules in Header.js.

First, rename header.css to header.module.css. Let's also rename the header-container class to camel case (headerContainer). This will be easier to import in the component.

In Header.js, replace the import of header.css with:

import headerStyles from "./header.module.css"

Now, in the div, replace the className input with className={headerStyles.headerContainer}. You can see the finished code in the course repo.

If you refresh the page and inspect the header component, you should see a class name similar to header-module--headerContainer--SQ6Jt (the string at the end will vary).

I love CSS modules, but it's not the only game in town for scoped CSS. The other very popular way is called CSS-in-JS. Let's talk about that in the next video.