来自 NextUI 的 ThemeProvider 导致警告：来自服务器的额外属性：类、样式

Question

我已将 NextUI 添加到我的 NextJS 14 应用程序

问题已被隔离到我的主providers.tsx 文件中的ThemeProvider：

'use client';

import { NextUIProvider } from '@nextui-org/react';
import { ThemeProvider as NextThemesProvider } from 'next-themes';

export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <NextUIProvider>
      <NextThemesProvider // <-- the issue
        attribute="class"
        defaultTheme="dark"
        themes={['light', 'dark', 'modern']}
      >
        {children}
      </NextThemesProvider>
    </NextUIProvider>
  );
}

问题就是这样，因为如果我删除它，错误就会消失：

<NextThemesProvider
    attribute="class"
    defaultTheme="dark"
    themes={['light', 'dark', 'modern']}
>

警告

**Warning: Extra attributes from the server: class,style
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:182:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:538:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11)**

当我深入研究 ThemeProvider 类型时：

interface ThemeProviderProps {
    /** List of all available theme names */
    themes?: string[] | undefined;
    /** Forced theme name for the current page */
    forcedTheme?: string | undefined;
    /** Whether to switch between dark and light themes based on prefers-color-scheme */
    enableSystem?: boolean | undefined;
    /** Disable all CSS transitions when switching themes */
    disableTransitionOnChange?: boolean | undefined;
    /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
    enableColorScheme?: boolean | undefined;
    /** Key used to store theme setting in localStorage */
    storageKey?: string | undefined;
    /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
    defaultTheme?: string | undefined;
    /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */
    attribute?: string | 'class' | undefined;
    /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
    value?: ValueObject | undefined;
    /** Nonce string to pass to the inline script for CSP headers */
    nonce?: string | undefined;
    /** React children */
    children: React.ReactNode;
}

class

可以发送到

attribute

属性中，这是 React 不喜欢的问题吗？

我发现了一些类似的问题，但没有一个与 NextUI 相关，关于如何从控制台删除此警告/错误有什么想法吗？

---

我确实创建了一个自定义 ThemeContext，但在注释掉它后我仍然收到错误警告：

import { FC, ReactNode } from 'react';
import Providers from '@/redux/provider';
import MainHeader from '@/components/mainheader';
import SideBar from '@/components/sidebar';
// import { ThemeProvider } from '@/context/ThemeContext';
import { User } from '@/types/user';

interface layoutProps {
  children: ReactNode;
}

// const user: User = {
//   theme: 'dark',
// };

const Layout: FC<layoutProps> = ({ children }) => {
  return (
    // <ThemeProvider user={user}>
    <main>
      <MainHeader />
      <SideBar />
      <Providers>{children}</Providers>
    </main>
    // </ThemeProvider>
  );
};

export default Layout;

我也尝试添加此

suppressHydrationWarning

，但也无法删除警告。

<div suppressHydrationWarning={true}>
  <NextUIProvider>
    <NextThemesProvider
      attribute="class"
      defaultTheme="dark"
      themes={['light', 'dark', 'modern']}
    >
      {children}
    </NextThemesProvider>
  </NextUIProvider>
</div>

Answer 1

将

suppressHydrationWarning

旗帜放置在错误的

div

上。

我必须在根布局文件上添加标志：

<html suppressHydrationWarning={true} lang="en">

警告现已消失。