Custom UI components with Ant Design

ActiveUI uses Ant Design as a basis to build more complex components. Therefore, to have an homogeneous "look and feel" in your ActiveUI-based application, you too should use Ant Design for baseline components such as buttons, text inputs, etc.

Adding Ant Design to your Project

Ant Design 3.20.6 modifies global styles. This makes it hard to integrate Ant Design into an existing project, or to use it along with other Components libraries. For this reason, ActiveUI-SDK provides scoped Ant Design styles, which don't affect the rest of your application. These styles only apply to elements that have an ancestor with the ant-root class name.

As a consequence, to integrate Ant Design in your project, you must:

  • add antd as a dependency in your package.json.
  • use the same Ant Design version as ActiveUI SDK does. In particular, if you use ActiveUI SDK 4.3.22, you must use Ant Design 3.20.6.
  • not import antd/dist/antd.css since ActiveUI SDK injects the scoped Ant Design style automatically.
  • make sure that all Ant Design components have an ancestor with the ant-root class name. See inheriting-ant-design-style.

Inheriting Ant Design Style

In order to inherit Ant Design styles, make sure that all Ant Design components have an ancestor with the ant-root class name.

By default, ActiveUI SDK requests and recommends that you should apply Ant Design styles globally by adding this class to the body element.

If you cannot apply the styles globally (for instance if you are using another third party components library that should not be impacted), then you should set assertAntDesignRootClassOnBody to false in your ActiveUIOptions and use the ant-root class name to define which DOM subtrees should obey Ant Design style rules. If you do this, be aware that you also need to configure Ant Design components with overlays (e.g. Modal, notification, Autocomplete Menu, Select, Tooltip): they are mounted in <body /> by default which means that, if <body /> does not have the ant-root classes, they will not be styled properly. These components come with a getContainer or getPopupContainer prop that you can use to tell Ant Design in which DOM node the overlay should be mounted.

Importing Specific Components

If you want to import Ant Design's <Button /> component for example, we recommend this syntax:

import Button from 'antd/lib/button';

Note: By using import {Button} from 'antd';, you will end up bundling the code of all Ant Design's components, which will make your application's JavaScript asset bigger than needed. Apply the same logic for all the other Ant Design components.

← ContainerData manipulation →