Styling React components failed in Gatsby site

[zhouxiang19910319]

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??

index.js

header.js

header.module.css

file tree

[Steffan153]

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.

[zhouxiang19910319]

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


export class Header extends React.Component{
    render(){
        return(
            <h4 className="headerStyle.header">This is the header area.</h4>
        );
    }
}

export default Header;

still not working???

[Steffan153]

@zhouxiang19910319

className=“headerStyle.header”

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

[zhouxiang19910319]

thank you!!!