概况

章节目录

由于出现了水合错误，我们将进行改进。

hydration error是指在初始渲染过程中，由于SSR或ISR与CLR不匹配而导致的错误。（更多细节请参考相关部分）

改善后，您可以确认hydarion错误已经消失。

开发环境

操作系统：Windows10
集成开发环境：VSCode

“@next/font” 的版本是 “13.1.5”,
“autoprefixer” 的版本是 “10.4.14”,
“eslint” 的版本是 “8.39.0”,
“eslint-config-next” 的版本是 “13.3.1”,
“next” 的版本是 “13.3.1”,
“postcss” 的版本是 “8.4.23”,
“react” 的版本是 “18.2.0”,
“react-dom” 的版本是 “18.2.0”,
“react-icons” 的版本是 “^4.8.0”,
“tailwindcss” 的版本是 “3.3.2”

实施要点

因为在react-theme的文档中有避免的方法，所以我会参考那个。

代码段落

布局

"use client";
import {useEffect, useState } from 'react'
import {MdLightMode} from "react-icons/md";
import {BsFillMoonFill} from "react-icons/bs"
import {useTheme} from "next-themes";


export default function DarkModeSwitch() {
    const{systemTheme,theme,setTheme} = useTheme();
+    const [mounted,setMounted] = useState(false);

+    useEffect(() => setMounted(true),[]);
    
    const currentTheme = theme === "system" ? systemTheme : theme;
    
    return (
    <>  
+        {mounted && ( currentTheme === "dark" ? (
            <MdLightMode 
                onClick={() => setTheme("light")}/>) : (
        <BsFillMoonFill onClick={() => setTheme("dark")}/>))}
    </>
  )
}

参考 option 1.

水分错误

反应主题

其他

Udemy 可提供各种在线学习课程。

GitHub提交记录