问题描述
我试图让我的每个应用程序页面的标题根据当前页面更改颜色。我是如何努力实现这一目标的:
<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 中有效。任何帮助将不胜感激。
解决方法
我认为它没有被应用,因为您在 CSS 模块中定义了 headerBitcoin
样式。
您需要在全局 CSS 中定义它们才能以这种方式应用。
,不要这样做:
<div className={props.className}>aaaaa</div>
试试这个:
<div className={styles[props.className]}>aaaaa</div>
我认为这应该有效