I am trying to have the header of each of my app's pages change color based on the current page. How I am trying to achieve this:

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

What I want is the be able to have the header ponent present on all 4 pages, and then just change the className to another prop to change the background but not anything else.
And the header ponent itself

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

At the moment the styles for the tabs and row are working but the header is not getting its style applied.
I checked the console and found the header is getting the className headerBitcoin passed to it, however the row beneath it has the className of "Home_row__88lPM"
This is my first time working with next.js, and I know I am doing something wrong because this works in React. Any help would be appreciated.

I am trying to have the header of each of my app's pages change color based on the current page. How I am trying to achieve this:

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

What I want is the be able to have the header ponent present on all 4 pages, and then just change the className to another prop to change the background but not anything else.
And the header ponent itself

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

At the moment the styles for the tabs and row are working but the header is not getting its style applied.
I checked the console and found the header is getting the className headerBitcoin passed to it, however the row beneath it has the className of "Home_row__88lPM"
This is my first time working with next.js, and I know I am doing something wrong because this works in React. Any help would be appreciated.

• javascript
• css
• reactjs
• next.js
• css-modules

• 2 Where do you have your headerBitcoin stylings defined? – juliomalves Commented Feb 26, 2021 at 21:38
• 1 I had them in my modules.css, I realized my error and put the css in my global css, now it is working. If you would please turn your ment in to an answer I will give you the reputation you deserve for that. – Dylan Bozarth Commented Feb 26, 2021 at 21:43

3 Answers 3

don't do this:

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

try this instead:

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

I think this should works

I assume it's not being applied because you have the headerBitcoin styles defined in your CSS module.

If you want to apply a class that way (className="headerBitcoin"), you need to define the class in your global CSS instead.

If you meant to use the headerBitcoin defined in Home.module.css, then you'll want to change the className to use the scoped styles.

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

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

You can pass props value to className like this

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