🧐[问题]在nextjs中使用 ConfigProvider 配置的主题token在服务端和客户端值不一致

[Ryuurock]

🧐 问题描述

在nextjs@14.0.4中pages/_app.tsx中使用 createStyles 时，访问token值与自定义的值不一致，但客户端一致，则造成生成的className不一致，控制台报错： Prop className did not match. Server: "acss-1811tl5" Client: "acss-1gcx34k"

💻 示例代码

pages/_app.tsx

export function App() {
   return (
       <ConfigProvider theme={{
           token: {
            colorPrimary: '#6266BF',
            borderRadius: 4
          },
        }}>
            <Component {...pageProps} />
        </ConfigProvider>
   )
}

styles.ts

export const useStyle = createStyles(({ css, prefixCls, token, responsive }) => {
  return {
    header: css`
      background: ${token.colorPrimary};
    `,
  };
});

export default function Page() {
   const { styles } = useStyle();

  return <div className={styles.header}></div>
}

🚑 其他信息

因为colorPrimary的值在服务端和客户端不一致造成className生成不一致，但具体找不到原因

[arvinxx]

参考 lobe-chat 的实现，加一下 transpilePackages 试试：

const nextConfig = {
  // ... 其他配置
  transpilePackages: ['antd-style'],
}

[Ryuurock]

参考 lobe-chat 的实现，加一下 transpilePackages 试试：

const nextConfig = {
  // ... 其他配置
  transpilePackages: ['antd-style'],
}

可以解决，感谢