styling of ui5 webcomponents

[DamianLion]

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]

Hey @DamianLion

Could you please tell us what exactly you would like to overstyle?
What would be better for you - to have public CSS variables for some stylings such as select’s options background color or explosed whole parts of the component such as Select’s popopver?

We are working on our theming concept currently and any feedback is appreciated.

Regards,
Martin

[DamianLion]

Sure. we are using the ui5-webcomponents/select in fundamental-ngx.

basically 😉

.sapWCSelect {
    height: 35px;
    border-radius: 4px;
}

[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!

[akshaykmr080]

Hello,
I am facing a similar problem.
My package.json has the following -
"@ui5/webcomponents": "^0.10.1",
"@ui5/webcomponents-base": "^0.10.1",
"@webcomponents/webcomponentsjs": "^2.2.10",

I am trying to set my custom styles for 'ui5-textarea'.

const textAreaCSS = '.sapWCTextAreaInner { background-color: red; !important}'
addCustomCSS('ui5-textarea', textAreaCSS)

The above entry doesn't seem to work.
I even tried to change the theme after setting my custom CSS. That doesn't seem to work either.

How do i add customCSS to ui5-webcomponents ?

[MapTo0]

hey @akshaykmr080,

do you pass the second parameter (theme name)?

As I explained above:

addCustomCSS("ui5-textarea", "sap_fiori_3", ...css... );

[akshaykmr080]

Thanks a lot. It worked after i placed the call in the constructor of my component.

Placing the addCustomCSS call in componentDidMount lifecycle method will not work

[MapTo0]

hmm, might be too late then, yes.

Just to inform you that we are considering (or we already did it :D not sure @pskelin) to remove the second parameter and the custom css to be available for all themes.

[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: #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!

[MapTo0]

Some of the recent changes to make this happen:
#670, #665, #664, #654, #674, #673, #671, #669, #650, #648, #647, #657, #667, #658, #668, #662, #660, #659