👘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 antd property.

2. All the styles must be written by less files.

3. Optionally support light/dark theme. See Theme.

Examples

// bootstrap.app.tsx
<UIProvider appId={appId} antd>
  <Page/> // Or <Widget/>
</UIProvider>

// light.less
.text-color {
  color: "black";
}

// dark.less
.text-color {
  color: "white";
}

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.

// Before
const appId = 'my_app'
<UIProvider appId={appId} antd={{ prefixCls: appId }}>
  <p className="text-color">A text with scoped styling</p>
</UIProvider>

// After
<section id="my_app">
  <p class="text-color">A text with scoped styling</p>
</section>

// Before
.text-color {
  color: "cyan";
}

// After
#my_app .text-color {
  color: "cyan"
}

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.