CSS применяется ко всем файлам, даже если они не импортированы

Question

Я имею дело с 2 компонентами: header.js и footer.js.

Еще есть 2 css файлов: header.module.css и footer.module.css. Оба они используют разные стили для тега a.

Я импортирую соответствующие файлы CSS в каждый файл js, но стиль a в footer.module.css, кажется, превосходит стиль в 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;
}

Свойство background-image из footer превосходит свойство header.

Answer 1

Если вы используете 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>
    </>
  )
}

Самое простое решение - обернуть каждый компонент в класс, чтобы CSS был доступен только внутри этого класса, примерно так:

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, чтобы избежать смешивания стилей и улучшить читаемость.

То же самое относится и к <Footer> компонент.

Answer 2

Согласно документации это import something from './something.module.css', а затем <Component className={something.error}