Question

我正试图利用next-themes执行黑暗模式。在<代码>layout.tsx文档中,<who> 载有背景说明。因此,我需要总结一下整个<代码><人与人;,载于<代码><ThemeProvider>,以改变背景,并在乞讨到黑暗的温和。我进口<代码><ThemeProvider> from ./lib/providers.ts,作为客户组成部分,以避免使整个用户成为用户组成部分。

<代码>提供人:文档如下:

"use client";

export { ThemeProvider } from "next-themes";

<代码>layout.tsx 档案如下:

import Navbar from "@/components/Navbar";
import "./globals.css";
import type { Metadata } from "next";
import { Nunito_Sans } from "next/font/google";
import Sidebar from "@/components/Sidebar";
import { ThemeProvider } from "@/lib/providers";

const nunito_sans = Nunito_Sans({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "My name | Portfolio",
  description: "My moto",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <ThemeProvider>
        <body
          className={`${nunito_sans.className} bg-gradient-to-r from-green to to-blue-400`}
        >
          <main className="grid grid-cols-12 gap-6 my-14 px-5 lg:px-48 sm:px-20 md:px-32">
            <div className="col-span-12 lg:col-span-3 bg-white rounded-2xl p-4 text-center">
              <Sidebar />
            </div>
            <div className="col-span-12 lg:col-span-9 bg-white rounded-2xl flex flex-col overflow-hidden">
              <Navbar />
              {children}
            </div>
          </main>
        </body>
      </ThemeProvider>
    </html>
  );
}

然而,这是错误的:

❌ Error
Hydration failed because the initial UI does not match what was rendered on the server.

⚠️ Warning
Expected server HTML to contain a matching in .

我也试图在其中建立一个单独的构成部分:<代码><Provider>和填平 >上,但也有同样的警告:


"use client";

import { ThemeProvider } from "next-themes";

export default function Providers({ children }: { children: React.ReactNode }) {
  return <ThemeProvider>{children}</ThemeProvider>;
}

Answer 1

在layout.tsx内,删除<html>和<上下; tags.

If you have a need for <head> tag, use the component <Head> from Next.js like:

import Head from  next/head

So your layout.tsx becomes:

import Navbar from "@/components/Navbar";
import "./globals.css";
import type { Metadata } from "next";
import { Nunito_Sans } from "next/font/google";
import Sidebar from "@/components/Sidebar";
import { ThemeProvider } from "@/lib/providers";

const nunito_sans = Nunito_Sans({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "My name | Portfolio",
  description: "My moto",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ThemeProvider>
      <main className={`${nunito_sans.className} bg-gradient-to-r from-green to to-blue-400 grid grid-cols-12 gap-6 my-14 px-5 lg:px-48 sm:px-20 md:px-32`}>
        <div className="col-span-12 lg:col-span-3 bg-white rounded-2xl p-4 text-center">
          <Sidebar />
        </div>
        <div className="col-span-12 lg:col-span-9 bg-white rounded-2xl flex flex-col overflow-hidden">
          <Navbar />
          {children}
        </div>
      </main>
    </ThemeProvider>
  );
}

您还需要核实,在<条码>、条码/编码>和<条码>内,根据W3C,你只有有效的html部分(如果你从下.js处取水错)。

Answer 2

Within your layout.tsx add the suppressHydrationWarning

export default function RootLayout({ children }: { children: React.ReactNode }) 

{
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
          <ThemeProviders>
            {children
          </ThemeProviders>
          
        </body>
    </html>
  );

Answer 3

这对我来说是有助益的,这样,主讲人只能站在客户一边:

import { Toaster } from "~/components/base/toaster";
import React, { type ReactNode } from "react";
import { useTheme } from "next-themes";

interface LayoutProps {
  children: ReactNode;
}

const Layout = ({ children }: LayoutProps) => {
  const { theme, setTheme, resolvedTheme } = useTheme();

  return (
    <div>
      <main>
        {/* Use the theme state from the useTheme hook */}
        <div className={`${resolvedTheme ===  dark  ?  dark  :   }`}>
          {children}
        </div>
      </main>
      <Toaster />
    </div>
  );
};

export default Layout;

友情链接