[英]How to fix “Warning: Prop className did not match” when using UIkit and NextJs
使用UIkit在 NextJS 中設置組件樣式時會出現警告。
重現：
npx create-next-app {app-name}cd {app-name} && npm ipages/index.js中的代碼替換為下面的代碼片段（第二部分）components/layout.js並添加下面的代碼片段（第一部分）npm run dev和 go 到 http://localhost:3000該應用程序正常運行，但警告實際上是關閉
// components/layout.js (1st part) import Head from "next/head"; const Layout = ({ children }) => { return ( <> <Head> {/* UIkit CSS */} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css" /> <title>NextJs App</title> {/* UIkit JS */} <script async src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit.min.js" /> <script async src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit-icons.min.js" /> </Head> {children} </> ); }; export default Layout; // pages/index.js (2nd part) import Layout from "../components/layout"; const Home = () => { return ( <Layout> <div className="uk-child-width-expand@s uk-text-center" data-uk-grid> <div> <div className="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div className="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div className="uk-card uk-card-default uk-card-body">Item</div> </div> </div> </Layout> ); }; export default Home;
控制台上出現的錯誤如下圖所示
問題似乎是我加載腳本的方式。
當我將腳本屬性async更改為defer時，警告消失了，並且頁面在沒有任何警告的情況下被編譯
在 nextjs 中導入 Image 組件時，如何刪除警告“Warning: Prop `style` did not match”？
[英]How do I remove warning "Warning: Prop `style` did not match" when I import Image component in nextjs?
NextJS React 應用程序樣式組件未正確呈現：警告：Prop `className` 不匹配
[英]NextJS React app styled component not rendering correct: Warning: Prop `className` did not match
nextjs：警告：道具 `className` 不匹配。 服務器：“x” 客戶端：“y”
[英]nextjs: Warning: Prop `className` did not match. Server: "x" Client: "y"
服務器和客戶端中的類名水化不匹配，（警告：Prop `className` 與服務器和客戶端不匹配）
[英]Class name hydration mismatch in server and client, (Warning: Prop `className` did not match Server and Client)
警告：支持`className`不匹配〜材料UI css在重新加載時任意中斷
[英]Warning: Prop `className` did not match ~ Material UI css arbitrarily breaks on reload
出現錯誤，部署到 Heroku 時，`Prop `className` 不匹配，但在本地工作
[英]Getting error, `Prop `className` did not match` when deploying to Heroku, but works locally
Next.Js 帶有樣式組件的 React 應用程序。 警告：道具 `className` 不匹配。 服務器：“x” 客戶端：“y”
[英]Next.Js React app with styled components. Warning: Prop `className` did not match. Server: "x" Client: "y"
使用 useEffect React Hook 時如何修復缺少依賴項警告？ 我正在使用 nextjs 應用程序
[英]How to fix missing dependency warning when using useEffect React Hook? I am using nextjs app
警告 Prop `href` 不匹配。 使用反應服務器端渲染
[英]Warning Prop `href` did not match. using react server-side-rendering
react-select：如何解決“警告：Prop `id` 不匹配”
[英]react-select: How do I resolve “Warning: Prop `id` did not match”
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.