UI5 Web Components for React custom styles

Hello, I am trying to implement custom styles (project with React and UI5 Web Components for React ), but I can’t! I tried this way and also addCustomCSS like this

`import UserSettings from ‘./UserSettings/UserSettings’;

addCustomCSS(‘ui5-shellbar-button’, { ‘font-size’: ‘20rem’, });`

…but still nothing, I have very big difficulty with finding proper documentation… Please advise

[ilhan007]

Hello again, no problem.

Unfortunately we don’t have a dedicated section within the documentation regarding the component customization, although we spend efforts to enable users to influence on their appearance.

In general, the UI5 Web Components follow the FIori 3.0 visual design guidelines. Fiori 3.0 specifies the colours, sizes, paddings and so on. And, we encourage the applications to stick to this design. Of course, everyone needs to change something here and there and we realise the customization is very important topic. We have several approaches to make the components more flexible:

Add styles on the tag

Whenever it is possible we set the default styles on the “host” (the component tag in other words). This is example from the Button.css

:host {
	min-width: var(--_ui5_button_base_min_width);
	height: var(--_ui5_button_base_height);
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontSize);
	text-shadow: var(--_ui5_button_text_shadow);
	border-radius: var(--_ui5_button_border_radius);
	border-width: 0.0625rem;
	cursor: pointer;
	background-color: var(--sapButton_Background);
	border: 1px solid var(--sapButton_BorderColor);
	color: var(--sapButton_TextColor);
	box-sizing: border-box;
}

Setting the styles on the “host” allows users to change all these css properties (min-width, height, font, border…) with styling the component as any other HTML element:

ui5-button {
  height: 100px;
  background-color: yellow;
  color: red;
}

You said it works only as an inline style. I assume that the component styles are parsed/loaded after your custom styles. Of course, you can’t know the order of the styles, when everything is bundled, you can strengthen the selector by adding a class (“mySpecialButton”) to the component and then the re is a good chance the following to work ui5-button.mySpecialButton {color: red}.

The Button also provides the attributes such as “active” when it is pressed, “focused” when it is focused. You can make use of them with standard CSS as well:

ui5-button.mySpecialButton([active]),
ui5-button.mySpecialButton([focused]),
ui5-button.mySpecialButton :hover {
  border: none
}

So, this approach goes for components such as the ui5-title, ui5-label, ui5-input, ui5-textarea and others. I suggest explore the styles applied on the “host”, because those are the styles you can overstyle easily as explained.

Usage of Shadow Parts

We started adding the “part” attribute on some important elements within the Shadow DOM of our components, so the users can overstyle the internals easily with simple css like:

The thing is we don’t have part attributes everywhere, we add them on demand. For example you need a part to change something in component “X”, you can file an issue and if the team decides it’s reasonable the team will add it.

For example the StandardListItem (ui5-li) has part attributes: title, description, icon, info If you inspect the Shadow DOM of one of the list items in the page, you will see them https://sap.github.io/ui5-webcomponents/master/playground/components/List/

Note: CSS Shadow Parts are not supported for IE. If you need to support IE, this won’t work for you.

Overwriting CSS variables

As you probably noticed we are using CSS variables. If you take a look of the head tag of your html page, you will find a style tags with the following attributes:

• data-ui5-theme-properties="@ui5/webcomponents-theme-base"
• data-ui5-theme-properties="@ui5/webcomponents".

The first style tag includes all the variables related to colours, whereas the second one is defining more geometry related parameters. When you explore the component you need to customize and find out which styles you need to overwrite and which varaibles are responsible for this and that you can predefine an existing variable:

:root {
--sapBrandColor: pink;
}

Usage of addCustomCSS(tag, css)

An old method that we do not encourage as we might be removed in future, what the method does is actually appends the css into the Shadow DOM and thus applying the change. To make it work the way you expect and to add the right selectors, you need to be familiar with the DOM structure, the rest of styles by inspecting the element Shadow DOM (with the Chrome dev tools for example).

Create a custom theme with ThemeDesigner (in progress)

ThemeDesigner is SAP tool that gives you the possibility the change parameters, colours mainly, preview the result and export the theme as a CSS file., that later can be included in an application and overwrite the default ones (those style tags I mentioned above). As this is still in progress I won’t spend much time on this, but it will soon be possible. This is useful for changing colours only. For example some of our customers need their primary colours to be: red, black and yellow according to their branding. But, after all this is just more user friendly way of changing the values of those CSS variables we include in the head.

Testing

At the end couple of words about the testing. The components itself are tested, you probably need to test the application functionality. We look at the components as HTML elements, how would you test your app without them? I assume you should the same with them. Give a try and if you are having issues please contact us.

Best, ilhan

[ilhan007]

We are happy that you are interested in using our web components, but these are a lot of questions. I think it will be easier if we arrange a short informal meeting (Microsoft teams or other video meeting platform) to see what do you want to achieve at the end and we can explain the concept behind our web components, what they allow and what is the best way to use them and answer most of your questions (or if we can`t answer them immediately, at least we can write them down and answer later.) Is it fine for you, or you prefer to stick to the github comments.