更改页眉中所有元素的背景，并保留页面的其余部分答案

【问题标题】：Change background for all elements in a header, and leave the rest of the page更改页眉中所有元素的背景，并保留页面的其余部分
【发布时间】：2021-06-14 05:28:23
【问题描述】：

我正在制作一个 gatsby 网站，它有一个 layout 和 header 组件，用于构建页面。我还有每个组件的单独样式表（layout.module.scss 和 header.module.scss）。

这是我的代码：

/* layout.js */
import React from "react"

import * as layoutStyles from "./layout.module.scss"

import Header from "./header"

const Layout = props => {
  return (
    <div className={layoutStyles.container}>
      <div className={layoutStyles.content}>
        <Header />
        {props.children}
      </div>
    </div>
  )
}

export default Layout

/* header.js */
import React from "react"
import { Link } from "gatsby"

import * as headerStyles from "./header.module.scss"

const Header = () => {
  return (
    <header className={headerStyles.header}>
      <Link to="/" className={headerStyles.logo}>
        Test Site
      </Link>
      <nav className={headerStyles.nav}>
        <ul class={headerStyles.navList}>
          <li>
            <Link to="/about" class={headerStyles.navItem}>About</Link>
          </li>
          <li>
            <Link to="/projects" class={headerStyles.navItem}>Projects</Link>
          </li>
          <li>
            <Link to="/contact" class={headerStyles.navItem}>Contact</Link>
          </li>
        </ul>
      </nav>
    </header>
  )
}

export default Header

/* layout.module.scss */
* {
    margin: 0;
    border: 0;
    background-color: #fff;
}

/* header.module.scss */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500&display=swap');

* {
  background: #F2EEE4;
}

.header {
  font-family: 'Roboto Slab', serif;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5rem;
  box-shadow: 0px 0.25rem 1rem #aaa;
  margin-bottom: 2rem;
}

.logo {
  font-weight: 500;
  font-size: 36px;
  color: #5065A8;
  text-decoration: none;
}

.nav-list {
  display: flex;
  list-style-type: none;
  margin: 0;

}

.nav-item {
  color: #5065A8;
  text-decoration: none;
  font-size: 1.2rem;
  margin-left: 3rem;
  font-size: 20px;
}

这样做会导致整个页面采用header.module.scss 的颜色，那么有没有办法只更改标题的背景而不为每个元素指定背景？

【问题讨论】：

标签： html reactjs sass gatsby

【解决方案1】：

取消全局背景

* {
  background: #F2EEE4;
}

以及为header添加的背景

【讨论】：

我应该澄清一下，我已经尝试过了。但是标题中的徽标和导航仍然有白色背景
因为你在 layout.module.scss 中有另一个全局背景，如果你也取消那个会发生什么？
修复了它，但是我怎样才能将页面的其余部分设置为不同的颜色，不包括没有那条线的颜色（假设我需要将其更改为非白色的颜色）？
您应该为组件中的主包装器提供背景颜色。在这种情况下，它将用于 layout.module.scss 中的
。使用 * 会影响所有组件，因为这是全局的
修复了它，我不得不将它应用到 .content 类而不是 .container 但修复了它，谢谢