在next中同时使用了Drawer和Popover组件并设置了自定义主题后，Drawer样式失效了 #49853
Comments
|
this is how Drawer display now this is Drawer style |
|
I have a similar problem. Whenever I use I use Next.js, so might be related to SSR. When I switch theme, it causes global re-render of the page and all styles are coming back and it starts working. So client-side reinitialization helps. It is really annoying as now I need to create our custom implementation of |
|
yeah, this problem is in css-in-js of antd. I rewrite nextjs-registry, fixed the styles problem.
… 2024年8月25日 06:51，ethos-vitalii ***@***.***> 写道：
I have a similar problem. Whenever I use Popover that wraps a Button, some random styles are lost on the page. In my case, it's positioning an icon inside of the circular Progress. Switching to Tooltip fixed the issue. Also, disabling layer also fixes the issue.
I use Next.js, so might be related to SSR. When I switch theme, it causes global re-render of the page and all styles are coming back and it starts working.
—
Reply to this email directly, view it on GitHub <#49853 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASG3TUK2FLKGY5YCMS47FRLZTEE7ZAVCNFSM6AAAAABKZ7YGA6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBYGU3DIMRWGA>.
You are receiving this because you authored the thread.
|
What did you change in nextjs-registry to fix the problem? Mind sharing your |
|
I figured out there is something wrong with layer style, Drawer style is wrapped by ***@***.*** ***@***.*** antd”(I named ant layer to antd)
source code is here https://github.com/ant-design/nextjs-registry/blob/main/src/AntdRegistry.tsx
I just copy it to my AntdRegistry and change styleText (used in line 28) by replacing ***@***.*** ***@***.*** antd” with ***@***.*** antd” to fix this problem. Also we should replace the AntdRegistry with my AntdRegistry.
If your problem is same to mine, you can have a try, this resolution can resolve it from the root. Hope it will help you.
… 2024年8月25日 23:38，ethos-vitalii ***@***.***> 写道：
yeah, this problem is in css-in-js of antd. I rewrite nextjs-registry, fixed the styles problem.
… <x-msg://2/#>
2024年8月25日 06:51，ethos-vitalii @.***> 写道： I have a similar problem. Whenever I use Popover that wraps a Button, some random styles are lost on the page. In my case, it's positioning an icon inside of the circular Progress. Switching to Tooltip fixed the issue. Also, disabling layer also fixes the issue. I use Next.js, so might be related to SSR. When I switch theme, it causes global re-render of the page and all styles are coming back and it starts working. — Reply to this email directly, view it on GitHub <#49853 (comment) <#49853 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASG3TUK2FLKGY5YCMS47FRLZTEE7ZAVCNFSM6AAAAABKZ7YGA6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBYGU3DIMRWGA. You are receiving this because you authored the thread.
What did you change in nextjs-registry to fix the problem? Mind sharing your AntdRegistry?
—
Reply to this email directly, view it on GitHub <#49853 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASG3TUOQJJK6UDSYNQNZ3Q3ZTH255AVCNFSM6AAAAABKZ7YGA6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBYHA4TSMZUGQ>.
You are receiving this because you authored the thread.
|
|
There is something wrong with last response , I just put screenshots down here

… 2024年8月25日 23:38，ethos-vitalii ***@***.***> 写道：
yeah, this problem is in css-in-js of antd. I rewrite nextjs-registry, fixed the styles problem.
… <x-msg://3/#>
2024年8月25日 06:51，ethos-vitalii @.***> 写道： I have a similar problem. Whenever I use Popover that wraps a Button, some random styles are lost on the page. In my case, it's positioning an icon inside of the circular Progress. Switching to Tooltip fixed the issue. Also, disabling layer also fixes the issue. I use Next.js, so might be related to SSR. When I switch theme, it causes global re-render of the page and all styles are coming back and it starts working. — Reply to this email directly, view it on GitHub <#49853 (comment) <#49853 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASG3TUK2FLKGY5YCMS47FRLZTEE7ZAVCNFSM6AAAAABKZ7YGA6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBYGU3DIMRWGA. You are receiving this because you authored the thread.
What did you change in nextjs-registry to fix the problem? Mind sharing your AntdRegistry?
—
Reply to this email directly, view it on GitHub <#49853 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASG3TUOQJJK6UDSYNQNZ3Q3ZTH255AVCNFSM6AAAAABKZ7YGA6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBYHA4TSMZUGQ>.
You are receiving this because you authored the thread.
|
|
Image in email seems have problem too. I just wrote my registry here(https://github.com/Kiyumi-v/AntdRegistryProblem/blob/main/src/MyRegistry.tsx) you can have a look. I just add one line codes(Line 22).
… 2024年8月26日 01:28，Vincent ***@***.***> 写道：
There is something wrong with last response , I just put screenshots down here
<粘贴的图形-1.png>
> 2024年8月25日 23:38，ethos-vitalii ***@***.***> 写道：
>
>
> yeah, this problem is in css-in-js of antd. I rewrite nextjs-registry, fixed the styles problem.
> … <x-msg://3/#>
> 2024年8月25日 06:51，ethos-vitalii @.***> 写道： I have a similar problem. Whenever I use Popover that wraps a Button, some random styles are lost on the page. In my case, it's positioning an icon inside of the circular Progress. Switching to Tooltip fixed the issue. Also, disabling layer also fixes the issue. I use Next.js, so might be related to SSR. When I switch theme, it causes global re-render of the page and all styles are coming back and it starts working. — Reply to this email directly, view it on GitHub <#49853 (comment) <#49853 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASG3TUK2FLKGY5YCMS47FRLZTEE7ZAVCNFSM6AAAAABKZ7YGA6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBYGU3DIMRWGA. You are receiving this because you authored the thread.
>
> What did you change in nextjs-registry to fix the problem? Mind sharing your AntdRegistry?
>
> —
> Reply to this email directly, view it on GitHub <#49853 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASG3TUOQJJK6UDSYNQNZ3Q3ZTH255AVCNFSM6AAAAABKZ7YGA6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBYHA4TSMZUGQ>.
> You are receiving this because you authored the thread.
>
|
|
Ah, yes. Indeed, it fixes the issue and I can confirm that CSS is wrong. Here's a snippet of incorrect CSS: .css-var-R2cq.ant-popover {
--ant-popover-title-min-width: 177px;
--ant-popover-z-index-popup: 1030;
--ant-popover-arrow-shadow-width: 8.970562748477143px;
--ant-popover-arrow-path: path('M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z');
--ant-popover-arrow-polygon: polygon(1.6568542494923806px 100%, 50% 1.6568542494923806px, 14.34314575050762px 100%, 1.6568542494923806px 100%);
--ant-popover-arrow-offset-horizontal: 12px;
--ant-popover-arrow-offset-vertical: 8px;
--ant-popover-inner-padding: 12px;
--ant-popover-title-margin-bottom: 8px;
--ant-popover-title-padding: 0px;
--ant-popover-title-border-bottom: none;
--ant-popover-inner-content-padding: 0px;
}
@layer antd@layer antd {
.ant-progress {
font-family: var(--ant-font-family);
font-size: var(--ant-font-size);
box-sizing: border-box;
}
...So the bug must be in I'll apply your workaround for now but it would be nice to get it fixing. |
Reproduction link
https://github.com/Kiyumi-v/AntdRegistryProblem
Steps to reproduce
在同时使用AntdRegistry、设置layer、设置自定义主题后，同时使用Drawer和Popover组件后，在页面上发现Drawer样式丢失。
What is expected?
期望Drawer正常显示
What is actually happening?
Drawer样式丢失
The text was updated successfully, but these errors were encountered: