英文:
Problems with styling Nextjs & tailwind
问题
I'm trying to make my navbar change color on scroll, I cannot get the colors to register inside ('').
It's just staying as ffffff.
Is this some tailwind issue?
useEffect(() => {
const colorChange = () => {
if (window.scrollY >= 90) {
setColor('#ffffff');
}
};
});
I tried to reinstall some dependencies and really looked over the code several times.
英文:
I'm trying to make my navbar change color on scroll, I cannot get the colors to register inside ('').
It's just staying as ffffff.
Is this some tailwind issue?
useEffect(() => {
const colorChange = () => {
if (window.scrollY >= 90) {
setColor('#ffffff');
}
};
});
I tried to reinstall some dependancies and really looked over the code several times
答案1
得分: 1
你需要在你的 useEffect 钩子中使用依赖数组，并且还应该添加 addEventListener() 方法。
用以下代码替换你的代码：
useEffect(() => {
const colorChange = () => {
if (window.scrollY >= 90) {
setColor('#ffffff');
}
};
window.addEventListener('scroll', colorChange)
return () => window.removeEventListener('scroll', colorChange)
}, []);
不要忘记导入这些钩子：
import { useEffect, useState } from "react";
进一步阅读:
英文:
You need to use dependency array in your useEffect hook, and also should add the addEventListener() method.
Replace your code with this one:
useEffect(() => {
const colorChange = () => {
if (window.scrollY >= 90) {
setColor('#ffffff');
}
};
window.addEventListener('scroll', colorChange)
return () => window.removeEventListener('scroll', colorChange)
}, []);
Don't forget to import the hooks:
import { useEffect, useState } from "react";
Further readings:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论