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

Question

我正在制作一个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的颜色，那么有没有办法只更改页眉的背景，而不指定每个元素的背景？

Answer 1

取消全局背景

* {
background: #F2EEE4;
}

以及仅为header添加的背景