🧐[问题]在nextjs中使用 ConfigProvider 配置的主题token在服务端和客户端值不一致
Ryuurock opened this issue · comments
🧐 问题描述
在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生成不一致,但具体找不到原因