External Css not working in Gatsby react project - reactjs

Question

I am not sure if this is the correct way of using CSS in gatsby but for some reason my external syles are not being applied in gatsby project.
This is what I am doing it
import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import "./header.css"
const Header = (props) => {
return (
<header
style={{
background: `black`,
marginBottom: `1.45rem`,
}}
>
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `1.45rem 1.0875rem`,
}}
>
<h1 style={{ margin: 0 }}>
<Link
to="/"
style={{
color: `white`,
textDecoration: `none`,
}}
>
{props.siteTitle} <span className="header-description"> {props.description} </span>
</Link>
</h1>
</div>
</header>
)
}
Header.propTypes = {
siteTitle: PropTypes.string,
}
Header.defaultProps = {
siteTitle: ``,
}
export default Header
and this is my header.css
.header-description {
font-size: 12;
}

Answer 1

Your css is invalid. font-size can't have unitless values except for 0.
Maybe you wanted it to be 12px?

Answer 2

what i usually do is create and import index.css into layer component (or any other wrapping component) aaaand then import individual/uniques/modules to that index.css. So the main index.css becomes sort of like a hub for css files which then is being imported only in once place. well, obviously if you would use css modules you would have to import them into your react components, but by the looks of it you are just using classnames. so...yea, try my method, maybe that helps? Theres also like 4 tutorials on how to import and use css and various styling methodologies in gatsby docs.