添加 NextUI 主题时的 NextJS 警告

NextJS Warning when adding NextUI theme

提问人:Muhammad Anas 提问时间:10/31/2023 最后编辑:Muhammad Anas 更新时间:11/2/2023 访问量:61

问:

我正在使用最新的NextJS。我已经使用next-theme来添加深色模式切换器功能。但是在使用 NextUI 的 Button 后,我收到了这个警告。

Warning: Extra attributes from the server: data-theme,style
html
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:24
NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:62
DevRootNotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:24
ReactDevOverlay@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9
HotReload@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:294:37
Router@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:157:93
ErrorBoundaryHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:53
AppRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:440:47
ServerRoot@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:126:24
RSCComponent
Root@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:142:24
ReactJS webpack next.js nextUI

评论

0赞 Beast80K 10/31/2023
先生,请编辑上述问题并添加您从NextUI导入Button的代码,布局.js代码,以及您编写的暗模式切换器功能等,以及任何其他代码(可能需要) 这将有助于找到问题。

答:

0赞 Arxci 11/2/2023 #1

您需要将 suppressHydrationWarning 添加到根布局中的 html 元素中

评论

0赞 11/6/2023
您好,谢谢...已经试过了。但这不是永久的解决方案。