CSS 被应用到所有文件，即使没有导入

Question

I am dealing with 2 components: header.js and footer.js .

I also have 2 css files: header.module.css and footer.module.css . Both of them use different styling for the a tag.

I import the respective CSS files within each js file, but the a styling in footer.module.css seems to overtake the styling in header.js even though it wasn't imported.

Here is the code:

header.js

import React from "react"
import { Link } from "gatsby"
import "../styles/header.module.css";

const ListLink = props => (
  <li style={{display: `inline-block`, marginRight: `1rem`, fontSize: '1.15rem', fontWeight: 'bold'}}>
    <Link className="link" to={props.to}>{props.children}</Link>
  </li>
)

footer.js

import React from "react"
import "../styles/footer.module.css";

const FooterLink = props => (
  <li style={{ display: `inline-block`, marginRight: `1rem`, marginBottom:'0rem', fontSize: '1.05rem', fontWeight: 'bold'}}>
    <a href={props.to} target="_blank">{props.children}</a>
  </li>
)

header.module.css

a {
    color: var(--textLink);
    text-shadow: var(--textShadow);
    transition:.2s;
    background-image: var(--bgimage);
}

a:hover {
    color: #da1e11;
    background-image: none;
}

footer.module.css

a{
    color: var(--textLink);
    text-shadow: var(--textShadow);
    transition:.2s;
    background-image: none;
}

a:hover {
    color: #da1e11;
    background-image: none;
}

The background-image property from footer overtakes the one specified in header .

Answer 1

According to the documentation it's import something from './something.module.css' and then <Component className={something.error}

Answer 2

If you are using Gatsby's default <Layout> , it shares <Header> and <Footer> components so, both are loading each CSS in each page as you can see here:

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      <div>
        <main>{children}</main>
        <Footer>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        </Footer>
      </div>
    </>
  )
}

The easiest solution is to wrap the each component in a class to make the CSS only available inside that class, something like this:

import React from "react"
import { Link } from "gatsby"
import "../styles/header.module.css";

    const ListLink = props => (
      <li className="list__item">
        <Link className="link" to={props.to}>{props.children}</Link>
      </li>
    )

Note: you can even wrap the <Link> inside a <div> for example.

I would suggest removing inline styles if you are using CSS modules to avoid mixing styles and improve readability.

The same applies for the <Footer> component.