UI components styling

UI components of the online office are reusable web components built with style incapsulation. Thus any UI component will look exactly same way placed in any page of any website.

Each UI component has its own properties that you can define to change its appearance. For example, for v-wallet-balance component, which shows a balance of a virtual wallet, you can define backgroundColor and borderColor attributes to customize its style.

But if you want to place UI component into your website sometimes it's useful to alter its entire style.

You can override default style of UI component using ::part() pseudoelement in your CSS.

This way you can simply override styles for some elements. To find out what elements and classes can be re-styled with ::part() inspect shadow dom elements tree of desired UI component looking for 'part' attribute defined.