Search code examples
javascriptcssreactjsdojoantd

A single antd v4 component broke the style of all components developed with antd v5

In my project based on the JS dojo framework, I have a standalone component written in react and antd 4 that I can't directly put my hands on.

In the last period I started to convert widgets written in dojo to react using antd 5, I tried in porting the components to the old part in dojo and everything works, except for numerous styling problems.

The components written in antd 5 are all weird, buttons and other components lose their rounding at the corners or for example switches are warped, appearing longer than they should be and also modals do what they want. This problem occurs only when I import/use components built within the old project. During development, they don't have these problems, in the project I can only fix this problem by removing the import of the component CSS written in antd 4. Does anyone have any idea how I can separate or isolate the two CSS (the one from antd 4 and 5)? Or any solution/idea?

This some examples of antd 5 components combined with the antd4 CSS component:

enter image description here enter image description here enter image description here enter image description here

Same component without the CSS of antd 4 component (Of course, the latter will break without the CSS).:

enter image description here enter image description here enter image description here enter image description here

Solution

  • You can avoid the conflict by using Config provider prefixCls.

    ref: https://ant.design/docs/react/migration-v5#multiple-versions-coexist