5

I have created react app with create-react-app and used ant-design components, as the project becomes bigger, I need to use some awesome components from ant-design-pro.

Is there any way to integrate ant-design-pro components in existing ant-design project?

I have tried to import and use @ant-design/pro-layout but didn't work for me.

Drisha
  • 113
  • 2
  • 5

2 Answers2

5

For V4 refer to Upgrade to V4, check Replace BasicLayout if you use @ant-design/pro-layout.

For single components use npm install ant-design-pro@2.3.2 and import components for your needs:

import Ellipsis from 'ant-design-pro/lib/Ellipsis';

Demo:

Edit OS Q 56488542

Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
  • Thank you for the response, this is what I want – Drisha Jun 07 '19 at 15:55
  • Do you need the less-loader to import antd pro component? –  coinhndp Sep 21 '19 at 06:16
  • 1
    I got this error ``` ./node_modules/antd/es/typography/style/index.less 1:0 Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. > @import '../../style/themes/index'; | @import '../../style/mixins/index'; | ``` –  coinhndp Sep 21 '19 at 06:17
4

Welcome to Stack Overflow!

It seems that the ant-design team chose to integrate ant-design-pro components directly into antd. The version 2.3.0 of ant-design-pro was the latest version of the library that you could use as a component library. (source: their changelog).

You can probably still install that version (here's the documentation to do so).

They recently released the v4 of ant-design-pro and I'm not entirely sure whether you can install the components stand-alone or not.

However, a lot of components from ant-design-pro are now maintained directly inside ant design, as you can see here:

In the next version of Pro, we will gradually remove all the components that will be added to the Ant Design, which are under development:

...

These components will be more fully supported and maintained in Ant Design, and Pro will focus on Layout and scaffolding.

Community
  • 1
  • 1
Clafouti
  • 4,035
  • 5
  • 30
  • 38