styling of ui5 webcomponents

I would like to override some of the classes. e.g .sapWCSelect As Chrome decided to remove support of shadow-dom css selectors and /deep/ and ::shadow are not an option.

What would be the best way of styling an ui5-webcomponent?

[MapTo0]

Hello @DamianLion

For now you can use the addCustomCSS as:

import "@ui5/webcomponents/dist/Select";
import { addCustomCSS } from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/theming/CustomStyle";

addCustomCSS("ui5-select", "sap_fiori_3", `.sapWCSelect {
  height: 35px;
  border-radius: 4px;
}`);

from v0.10.0 we will change the base imports by removing /sap/ui/webcomponents/base/

0.9.0 "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/theming/CustomStyle"

0.10.0 "@ui5/webcomponents-base/src/theming/CustomStyle"

We are currently reworking the theming and we will provide a better overstyling for the future. I will keep this open as we have some more work to do.

Regards!

[MapTo0]

Hello all,

We did quite a lot of work in that direction:

Styling Root

Styling components using CSS on root - you can now style most of the components (for which it makes sense ofcourse) on root level

e.g. <ui5-input style="height: 200px; width: 10px; border: 1px solid blue"></ui5-input>

CSS Variables

We expose some `CSS custom properties for some parts of the components which make sense to have a public API

e.g. --ui5-panel-background-color of the ui5-panel

CSS Shadow Parts

CSS Shadow parts is not yet implemented in all major browsers, but we believe that this is the right direction for styling parts of Shadow DOM. Therefore, we provide some of parts of our composite components as an API. e.g. ui5-card - status part

ui5-card.online::part(status) {
  color: green;
  font-size: 2rem;
}

We are working on a polyfill until we got a full browser support on that feature. The polyfill is still in a review stage, but I believe it will be out for some testing and feedback very soon: https://github.com/SAP/ui5-webcomponents/pull/609

Global Theming

As all of our components are working with CSS Custom Variables we are also working in the direction of providing a way to make your own theme using a tool such as the SAP Theme Designer. So stay tuned!

If you have any other feedback or proposals feel free to contact us!