Sentre
Search…
👘
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.
- 1.Wrap your Page and Widget in UIProvider with active
antdproperty. - 2.All the styles must be written by
lessfiles. - 3.
Examples
1
// bootstrap.app.tsx
2
<UIProvider appId={appId} antd>
3
<Page/> // Or <Widget/>
4
</UIProvider>
Copied!
1
// light.less
2
.text-color {
3
color: "black";
4
}
5
6
// dark.less
7
.text-color {
8
color: "white";
9
}
Copied!
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.1
// Before
2
const appId = 'my_app'
3
<UIProvider appId={appId} antd={{ prefixCls: appId }}>
4
<p className="text-color">A text with scoped styling</p>
5
</UIProvider>
6
7
// After
8
<section id="my_app">
9
<p class="text-color">A text with scoped styling</p>
10
</section>
Copied!
1
// Before
2
.text-color {
3
color: "cyan";
4
}
5
6
// After
7
#my_app .text-color {
8
color: "cyan"
9
}
Copied!
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 modified 1mo ago
Copy link