CSS 被應用到所有文件，即使沒有導入

Question

我正在處理 2 個組件： header.js和footer.js 。

我也有 2 個 css 文件： header.module.css和footer.module.css 。 他們都為a標簽使用了不同的樣式。

我在每個 js 文件中導入了相應的 CSS 文件，但是footer.module.css中a樣式似乎超過了header.js中的樣式，即使它沒有被導入。

這是代碼：

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;
}

footer的background-image屬性超過了header中指定的屬性。

Answer 1

根據文檔，它import something from './something.module.css' ，然后<Component className={something.error}

Answer 2

如果您使用 Gatsby 的默認<Layout> ，它共享<Header>和<Footer>組件，因此，兩者都在每個頁面中加載每個 CSS ，如您在此處看到的：

  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>
    </>
  )
}

最簡單的解決方案是將每個組件包裝在 class 中，以使 CSS 僅在 class 內部可用，如下所示：

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

注意：例如，您甚至可以將<Link>包裝在<div>中。

如果您使用 CSS 模塊，我建議刪除內聯 styles 以避免混合 styles 並提高可讀性。

<Footer>組件也是如此。