Javascript 在next.js中将道具作为类名传递

我正在尝试让我的每个应用程序页面的标题根据当前页面更改颜色。我是如何实现这一目标的：

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

我想要的是能够在所有4个页面上显示标题组件，然后将类名更改为另一个道具以更改背景，而不是其他任何内容。
以及标头组件本身

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

从“../../styles/Home.module.css”导入样式；
导出默认函数标题（道具）{
返回(
AAAA
A.
A.
A.
A.
{" "}
);
}

此时，选项卡和行的样式正在工作，但标题未应用其样式。
我检查了控制台，发现标头正在将类名

headerBitcoin

传递给它，但是它下面的行的类名是

“Home\u row\uu 88lPM”

---

这是我第一次使用next.js，我知道我做错了什么，因为它在React中工作。如果您有任何帮助，我们将不胜感激。

我认为它不会被应用，因为您的CSS模块中定义了

headerBitcoin

样式

您需要在全局CSS中定义它们，以便以这种方式应用。

不要这样做：

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

aaaaa

请尝试以下方法：

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

aaaaa

---

我认为这应该是可行的

你在哪里定义了你的

headerBitcoin

样式？我在我的模块中定义了它们。css，我意识到了我的错误，并将css放在了我的全局css中，现在它开始工作了。如果你愿意把你的评论变成一个答案，我会给你应得的声誉。