javascript - 在 next.js 中将 Prop 作为类名传递

Question

我试图让我的每个应用程序页面的页眉根据当前页面更改颜色。我是如何努力实现这一目标的:

<Header className="headerBitcoin"></Header>

我想要的是能够在所有 4 个页面上都显示页眉组件，然后只需将 className 更改为另一个 Prop 以更改背景而不是其他任何内容。
以及 header 组件本身

import styles from "../../styles/Home.module.css";
export default function Header(props) {
  return (
    <div >
      <div className={props.className}>aaaaa</div>
      <div className={styles.row}>
        <div className={styles.tab}>a</div>
        <div className={styles.tab}>a</div>
        <div className={styles.tab}>a</div>
        <div className={styles.tab}>a</div>
      </div>{" "}
    </div>
  );
}

目前选项卡和行的样式有效，但标题未应用其样式。
我检查了控制台，发现 header 正在将类名 headerBitcoin 传递给它，但是它下面的行的类名是 "Home_row__88lPM"
这是我第一次使用 next.js，我知道我做错了什么，因为它适用于 React。任何帮助将不胜感激。

Answer 1

不要这样做:

<div className={props.className}>aaaaa</div>

试试这个:

<div className={styles[props.className]}>aaaaa</div>

我认为这应该可行