ui
ui copied to clipboard
Warning: Prop `className` did not match.
I'm seeing this error Warning: Prop `className` did not match. Server: "__variable_914793 dark" Client: "__variable_914793" in the browser console whenever my app loads
Here's my layout.tsx
import { ThemeProvider } from "@/components/theme-provider";
import "@/styles/globals.css";
import type { Metadata } from "next";
import { GeistSans } from "geist/font";
import { Navbar } from "@/components/navbar";
export const metadata: Metadata = {
title: "My App",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={GeistSans.variable}>
<body className="min-w-[350px]">
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<Navbar />
{children}
</ThemeProvider>
</body>
</html>
);
}
Does anyone know what's happening here?
I'm facing the same issue its related to next theme and hydration , you can find different solutions here https://github.com/pacocoursey/next-themes/issues/169
I think this one is the best solution https://github.com/pacocoursey/next-themes/issues/169#issuecomment-1733952011
I get this every time I start up a fresh shadcn project with themes.
I'm currently using this <html lang="en" suppressHydrationWarning>
@nooblyf I still get the warning even when using that (that's actually included in the docs).
This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.
Hi @shadcn I think I fixed this one here actually https://github.com/shadcn-ui/ui/pull/2324