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

Question

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

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

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

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 中有效。任何帮助将不胜感激。

Answer 1

不要这样做：

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

试试这个：

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

我认为这应该有效

Answer 2

我认为它没有被应用，因为你在 CSS 模块中定义了

headerBitcoin

样式。

如果您想以这种方式应用类 (

className="headerBitcoin"

)，您需要在全局 CSS 中定义该类。

如果您打算使用

headerBitcoin

中定义的

Home.module.css

，那么您需要更改

className

以使用范围内的

styles

。

import styles from "../../styles/Home.module.css";

export default function Header(props) {
  return (
    <div >
      <div className={styles[props.className]}>aaaaa</div>
      // ...
    </div>
  );
}

Answer 3

您可以像这样将 props 值传递给 className

import styles from "../../styles/Home.module.css";

export default function Header(props) {

  cosnt className = 'className'

  return (
    <div >
      <div className={styles[`${className}` + props]}>aaaaa</div>
      // ...
    </div>
  );
}