在 next.js 中将 props 作为类名传递答案

【问题标题】：passing props as classNames in next.js在 next.js 中将 props 作为类名传递
【发布时间】：2021-05-29 04:50:07
【问题描述】：

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

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

我想要的是能够让标题组件出现在所有 4 个页面上，然后只需将 className 更改为另一个道具即可更改背景，但不能更改其他任何内容。
还有头组件本身

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

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

【问题讨论】：

你在哪里定义了headerBitcoin 样式？
我在 modules.css 中有它们，我意识到我的错误并将 css 放在我的全局 css 中，现在它可以工作了。如果您愿意，请将您的评论转化为答案，我会给予您应得的声誉。

标签： javascript css reactjs next.js css-modules

【解决方案1】：

不要这样做：

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

试试这个：

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

我认为这应该可行

【讨论】：

【解决方案2】：

我认为它没有被应用，因为您在 CSS 模块中定义了 headerBitcoin 样式。

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

【讨论】：