👘Customizing Styles
👍 Following the default design
If you're not sure how to build customs for your DApps, we highly recommend that you should follow the default design, which is a variant of Ant Design. By using the default, you have no worries about style matching and theme (light/dark).
Using Ant Design
Because the platform is currently using Ant Design for UI implementation, another customized Ant Design in DApps must follow some additional steps to make sure both Ant Designs can work separately.
Wrap your Page and Widget in UIProvider with active
antd
property.All the styles must be written by
less
files.Optionally support light/dark theme. See Theme.
Examples
To isolate your styling, the platform employed CSS Selector to scope the DApp's styling. Basically, there is a wrapper with id being your appId. All styles in your DApps will be prepended by a #[appId]
selector.
Using other UI systems
In this time, you can freely use your favorite UI systems to build DApps. However, be careful that there may exist other DApps that use the same UI system as your DApps, but with customized styles, and that case will lead to styles conflicts. Then if your UI system supported scoped css, css modules, or any techniques that help to isolate customized styles, let's apply it in the first place to avoid possible problems.
Last updated