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:
antdas a dependency in your
- use the same Ant Design version as ActiveUI SDK does. In particular, if you use ActiveUI SDK 4.3.6, you must use Ant Design 3.20.6.
- not import
antd/dist/antd.csssince ActiveUI SDK injects the scoped Ant Design style automatically.
- make sure that all Ant Design components have an ancestor with the
ant-rootclass 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
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
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.
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
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
Apply the same logic for all the other Ant Design components.