Я пытаюсь изменить цвет заголовка каждой страницы моего приложения в зависимости от текущей страницы. Как я пытаюсь этого добиться:
<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
Источник: