ant-design Re-exported Ant Design components don't have same style with the original components in Nextjs project

up9lanfz  于 3个月前  发布在  Ant Design
关注(0)|答案(6)|浏览(106)

https://codesandbox.io/p/devbox/pedantic-hooks-ft2yzk?file=%2Fpages%2Fmenu1.tsx%3A9%2C55

Steps to reproduce

  • Create a library
  • In this library, export Antd components (i.e: export * from 'antd')
  • Bundle library using Rollup, and publish it
  • Install library in a Nextjs project which using Antd
  • Make 2 Button components: 1 imported from library, 1 imported from antd, wrap them with ConfigProvider, ConfigProvider has some styles (i.e: colorPrimary).

What is expected?

Both 2 Buttons have the same style (i.e: backgroundColor) from the ConfigProvider

What is actually happening?

Only the component imported directly from antd has the style from ConfigProvider
| Environment | Info |
| ------------ | ------------ |
| antd | 5.15.1 |
| React | React |
| System | All version |
| Browser | All browsers |

I created my own library, by re-export Ant Design component. I install my library in my Nextjs project, this project has been wrapped with ConfigProvider, in the app i have 2 input: 1 imported from my library and 1 imported from antd, the one from my library doesn't have style from the ConfigProvider. The issue only happens in Nextjs project, in pure Reactjs, it works fine.
Here is my library repo: https://github.com/phantomtet/rollup-react-library-starter

watbbzwu

watbbzwu1#

How could I reproduce the problem, is there a simply way to see it?

xuo3flqw

xuo3flqw2#

Hello @phantomtet. Please provide a online reproduction by forking codesandbox of antd@5.x or antd@4.x , or provide a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @phantomtet,我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 antd@5.xantd@4.x 的 codesandbox,或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
什么是最小化重现,为什么这是必需的?

wlsrxk51

wlsrxk513#

@afc163 Hi there, i created codesandbox, you can reproduce here:
https://codesandbox.io/p/devbox/pedantic-hooks-ft2yzk?file=%2Fpages%2Fmenu1.tsx%3A9%2C55
Look like the problem related to Nextjs, because when i test with pure Reactjs, the problem didn't happen.

kcwpcxri

kcwpcxri6#

It should be nextjs that did something on import from antd, which made the instance of ConfigProvider not the same.

相关问题