передача реквизитов как classNames в next.js

Я пытаюсь изменить цвет заголовка каждой страницы моего приложения в зависимости от текущей страницы. Как я пытаюсь этого добиться:

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

В настоящий момент стили для вкладок и строки работают, но стиль заголовка не применяется.
Я проверил консоль и обнаружил, что заголовок получает имя класса headerBitcoin, переданное ему, однако строка под ним имеет имя класса "Home_row__88lPM"
Я впервые работаю с next.js, и я знаю, что я делаю что-то не так, потому что это работает в React. Любая помощь будет оценена.

Где у вас определены ваши headerBitcoin стили?   —  person imstupidpleasehelp    schedule 27.02.2021

У меня они были в моем modules.css, я понял свою ошибку и поместил css в свой глобальный css, теперь он работает. Пожалуйста, превратите свой комментарий в ответ, я дам вам репутацию, которую вы за это заслуживаете.   —  person imstupidpleasehelp    schedule 27.02.2021

См. также:  Маршрутизация и анализ данных запроса с помощью Node.js
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 2
  1. imstupidpleasehelp

    Я предполагаю, что он не применяется, потому что у вас есть стили headerBitcoin, определенные в вашем модуле CSS.

    Вам нужно будет определить их в вашем глобальном CSS, чтобы он мог применяться таким образом.

  2. imstupidpleasehelp

    не делай этого:

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

    попробуйте вместо этого:

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

    Я думаю, это должно сработать

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: