I am currently attempting to create a dynamic header for each page of my app that changes color based on the current page. Here is my approach:
<Header className="headerBitcoin"></Header>
My goal is to have the same header component displayed on all 4 pages, with the ability to simply change the className to alter the background color without affecting anything else.
Below is the code for the header component:
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>
);
}
Currently, the styling for the tabs and row is working as expected, but the header is not reflecting its assigned style.
Upon inspecting the console, I noticed that the header is receiving the className headerBitcoin, while the row below it is assigned the className "Home_row__88lPM".
This is my first time using next.js, and I suspect there may be an error in my implementation as this functionality typically works in React. Any assistance would be greatly appreciated.