我有这个问题。我试图创建onclick来改变网站上的主题。
React版本18.2.0下一步13.1.5
enter image description here
const [darkMode, setDarkMode] = useState(false);
return (
<div className={darkMode ? "dark" : ""}>
<Head>
<title>Nared Fuengverojsakul</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className=" bg-white px-10 dark:bg-gray-900 md:px-20 lg:px-40">
<section className="min-h-screen">
<nav className="py-10 mb-12 flex justify-between dark:text-white">
<h1 className="font-burtons text-xl">PORTFOLIO</h1>
<ul className="flex items-center">
<li>
<BsFillMoonStarsFill
onClick={() => setDarkMode(!darkMode)}
className=" cursor-pointer text-2xl"
/>
</li>
</main>
</div>
);未处理的运行时错误
错误：水合时出错。由于错误发生在挂起边界之外，因此整个根将切换到客户端呈现。
enter image description here
1条答案
按热度按时间osh3o9ms1#
首先，检查控制台中是否出现任何错误。如果出现错误，请修复错误。如果导入的组件不需要服务器端呈现，请使用以下导入类型以避免水合错误。