cssinjs icon indicating copy to clipboard operation
cssinjs copied to clipboard

Prop `className` did not match.

Open terminalqo opened this issue 2 years ago • 16 comments

Hi, I'm using nextjs@13 + antd@5.

And browser show this in devtool:

Warning: Prop `className` did not match. 

Server: "ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark css-dev-only-do-not-override-1dsa5t3" 

Client: "ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark css-dev-only-do-not-override-t98trl"

Which I think there are something wrong with this:

image

terminalqo avatar Nov 18 '22 09:11 terminalqo

image So, hash function may run twice, once in server, once in client ?

terminalqo avatar Nov 21 '22 07:11 terminalqo

Hi there with next js v12.2.2 and ant v5 it also reproducible

mitya-kocherga avatar Nov 29 '22 07:11 mitya-kocherga

Hello with "next": "13.0.4" and ant v5 also reproducible

cassianpry avatar Dec 26 '22 16:12 cassianpry

This is a serious bug

cong1223 avatar Jan 27 '23 14:01 cong1223

Same issues. ☹️

immdraselkhan avatar Mar 30 '23 09:03 immdraselkhan

Any update on this?

bombillazo avatar Mar 30 '23 13:03 bombillazo

const ProLayout = dynamic( () => import("@ant-design/pro-components").then((com) => com.ProLayout), { ssr: false } );

if you are using Pro Layout component, then you can use this code. It would defeat the purpose of using SSR.

markpedong avatar Jul 27 '23 14:07 markpedong

m

hstarorg avatar Jul 28 '23 17:07 hstarorg

I found website with solution

koliader avatar Sep 14 '23 13:09 koliader

any update?

yasz avatar Nov 08 '23 09:11 yasz

I'm also having this error when using AntD v5 and Remix v2, loading the AntD CSS using the "whole export" approach.

manzaloros avatar Nov 20 '23 17:11 manzaloros

This issue happens with both "whole export" and "inline-styles".

bombillazo avatar Nov 22 '23 22:11 bombillazo

const ProLayout = dynamic( () => import("@ant-design/pro-components").then((com) => com.ProLayout), { ssr: false } );

if you are using Pro Layout component, then you can use this code. It would defeat the purpose of using SSR.

this resolved my problem,thanks.

yanugto avatar Mar 09 '24 09:03 yanugto

next14 have the same problem

Minf97 avatar Apr 09 '24 11:04 Minf97

const ProLayout = dynamic( () => import(“@ant-design/pro-components”).then((com) => com.ProLayout), { ssr: false } );

如果您使用的是 Pro Layout 组件,则可以使用此代码。这将破坏使用 SSR 的目的。

This is a bad idea

yjw0628 avatar May 09 '24 09:05 yjw0628

I'm also having this error when using AntD v5 and Remix v2, loading the AntD CSS using the "whole export" approach.

I am also seeing this in AntD 5 and Remix 2

SamChami avatar Jun 07 '24 17:06 SamChami