How to elegantly override Ant Design component styles?#
Customization based on ConfigProvider#
In V5, Ant Design provides a brand new theme property for customization. Therefore, if you need to customize component styles, it is recommended to use the theme field on the ConfigProvider as a priority.
The demo example is as follows:
The ThemeProvider of antd-style is a business-layer encapsulation based on ConfigProvider, providing user-friendly customization capabilities. See: Custom Theme
Basic Overrides#
The createStyles method has a prefixCls parameter. By using this parameter, you can pass in the prefix of the component, so that any style overrides can automatically change with the change of prefixCls.
Increasing Specificity for Overrides#
In some components, directly adding a class name may not have enough specificity to override the styles. In this case, you can use the & symbol to increase the specificity accordingly.
Overrides for Multiple classNames Scenarios#
classNames is a major feature of antd V5: Semantic DOM Structure for all Components.
In the past, when defining styles, we needed to find many DOM nodes for extensive style overrides. However, during the upgrade process of antd, sometimes the DOM structure may be adjusted. As a result, our overridden styles may encounter issues.
With classNames, it will provide us with a stable DOM structure API. We can pass in the class names through classNames, which will point to the corresponding DOM nodes, thereby greatly reducing the risk of Breaking Changes caused by DOM changes. It also eliminates the need for us to hackishly search for style class names.