NextJS 显示警告：使用 Tailwind CSS 和样式化组件时 Prop className 不匹配

Question

import { createContext, useEffect, useState } from 'react';

export const CartContext = createContext({});

export function CardContextProvider({ children }) {
  const [cartProducts, setCartProducts] = useState([]);

  useEffect(() => {
    if (typeof window !== "undefined") {
      const localStorageData = window.localStorage.getItem('cartProducts');
      if (localStorageData) {
        setCartProducts(JSON.parse(localStorageData));
      }
    }
  }, []);

  useEffect(() => {
    if (typeof window !== "undefined") {
      window.localStorage.setItem('cartProducts', JSON.stringify(cartProducts));
    }
  }, [cartProducts]);

  function addProduct(productId) {
    setCartProducts([...cartProducts, productId]);
  }

  function removeProduct(productId) {
    const index = cartProducts.findIndex((id) => id === productId);
    if (index !== -1) {
      const newCartProducts = [...cartProducts];
      newCartProducts.splice(index, 1);
      setCartProducts(newCartProducts);
    }
  }

  return (
    <CartContext.Provider value={{ cartProducts, setCartProducts, addProduct, removeProduct }}>
      {children}
    </CartContext.Provider>
  );
}

什么会导致此警告？我试图避免here提出的所有事情，但我仍然遇到这个错误。我正在使用 next.js、tailwind 和样式组件。

Answer 1

问题：

Nextjs Hydration：无法无错误地写出标题

可能的原因：

• 浏览器扩展
• 在渲染逻辑中使用仅限浏览器的 API，例如 window 或 localStorage，而不是使用“使用客户端”指令
• 不合适

  next.config.js

可能的解决方案：

• 在文件顶部添加“使用客户端”指令

  CardContextProvider

• 禁用所有浏览器扩展，

在

styledComponents: true,

中添加

next.config.js

：

/** @type {import('next').NextConfig} */

const nextConfig = {
  ...
  compiler: {
    styledComponents: true,
  },
};

module.exports = nextConfig;

请阅读：

• ‘使用客户端’：https://react.dev/reference/react/use-client

• 带有样式组件的示例应用程序：https://github.com/vercel/next.js/tree/canary/examples/with-styled-components

• 使用 SWC：https://styled-components.com/docs/advanced#next.js

• 如果在 NextJS 中使用应用程序路由器：https://styled-components.com/docs/advanced#app-directory

如果您有任何疑问，请发表评论（如果有必要我会更新答案）