最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - passing props as classNames in next.js - Stack Overflow

programmeradmin2浏览0评论

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.

Share Improve this question edited Mar 7, 2021 at 0:42 juliomalves 50.5k23 gold badges177 silver badges168 bronze badges asked Feb 26, 2021 at 19:53 Dylan BozarthDylan Bozarth 1,7042 gold badges21 silver badges48 bronze badges 2
  • 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
Add a ment  | 

3 Answers 3

Reset to default 5

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

发布评论

评论列表(0)

  1. 暂无评论