Styling React components failed in Gatsby site

I tried to use Styled Components to style a header in my gatsby site but it does not appear to work.

Where did I do wrong??




file tree

In your JS file, you didn’t apply the styles to any element.
For example: If in header.module.css, you put a class header, then you set the className to headerStyles.header in whatever needs the class header.

import React from "react"
import headerStyle from "./header.module.css"

export class Header extends React.Component{
            <h4 className="headerStyle.header">This is the header area.</h4>

export default Header;

still not working???

Close! But you need to dynamically set it – className={headerStyle.header}.

thank you!!! :grinning::grinning::grinning::grinning: