You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/knowledge-base/Styling.mdx
+13-45Lines changed: 13 additions & 45 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,63 +11,31 @@ import { MyCustomElement } from '../styling/MyCustomElement';
11
11
12
12
<TableOfContent />
13
13
14
-
## Styling UI5 Web Components for React components
15
-
16
-
You can change the appearance of the Web Components by using [CSS Variables](https://www.w3schools.com/Css/css3_variables.asp).
17
-
Per default, we are injecting the Horizon theme parameters as CSS Variables into the `<head>`.
18
-
For example, if you want to change the color of all texts that use the `--sapTextColor` variable, you can create an additional `style` tag with the following content:
19
-
20
-
```html
21
-
<style>
22
-
* {
23
-
--sapTextColor: limegreen;
24
-
}
25
-
</style>
26
-
```
27
-
28
-
<MessageStrip
29
-
hideCloseButton
30
-
design={MessageStripDesign.Critical}
31
-
children="Changing the value of a CSS Variable will affect theming capabilities, as it will be changed for all themes!"
32
-
/>
33
-
34
-
As a consequence, all HTML Elements in the subtree where this style was applied are now displaying their texts in `limegreen` instead of `#32363a` which would be the default value for Fiori 3.
35
-
You can change CSS Variables on any level - in the head, or on every single element by using either CSS classes or element style.
14
+
## Styling UI5 Web Components (for React) components
36
15
37
-
A full list of all supported CSS Variables can be found [here](https://github.com/UI5/webcomponents-react/blob/main/packages/base/src/styling/ThemingParameters.ts)
38
-
or in the [theming-base-content](https://github.com/SAP/theming-base-content/tree/master/content/Base/baseLib) repo.
39
-
40
-
## Scrollbars
16
+
UI5 Web Components for React follows the same styling approach as the core [UI5 Web Components](https://ui5.github.io/webcomponents/docs/advanced/styles/).
17
+
You can apply CSS variables, use the `::part` pseudo-element selectors, or apply styles directly on selected components (e.g. `Button`, `Title`, `Input`, etc. ) as described in the linked [documentation](https://ui5.github.io/webcomponents/docs/advanced/styles/).
41
18
42
-
Rendering our `ThemeProvider` will apply the Fiori styles to all scrollbars on the page.
43
-
If you want to opt-out of this behavior, you can add the `.ui5-content-native-scrollbars` class to the respective element to prevent the scrollbar styling from being applied.
19
+
Components currently only available in the `ui5/webcomponents-react` repo, are not necessarily web components. For these kind of components you can follow the standard styling approach of React.
44
20
45
21
<MessageStrip
46
-
design={MessageStripDesign.Information}
47
-
hideCloseButton
48
-
children="Due to the limited configuration options for scrollbars, you must apply this class to each scroll-container element individually."
22
+
design={MessageStripDesign.Critical}
23
+
hideCloseButton
24
+
children="While it's easily possible targeting DOM elements and CSS classes of components without a shadow root, modifying internal structures or styles is not officially supported and may break with future updates. Use such changes carefully."
`@ui5/webcomponents` components come with globally applied scrollbar styles.
30
+
If you want to opt-out of this behavior, you can add the `.ui5-content-native-scrollbars` class to the `body` of the page. You can find out more about this in the [ui5/webcomponents documentation](https://ui5.github.io/webcomponents/docs/advanced/scrollbars-customization/).
54
31
55
32
## Style your own components
56
33
57
34
It's quite likely you have to create some custom components when you are building an app.
58
35
In order to reuse our central styling approach, you can import the `ThemingParameters` that contain the various CSS variables used in our theming, or use the CSS variables directly.
59
36
60
-
<MessageStrip
61
-
design={MessageStripDesign.Information}
62
-
hideCloseButton
63
-
children={
64
-
<>
65
-
You can find all <code>ThemingParameters</code>{''}
66
-
<ui5-linkhref="./?path=/docs/knowledge-base-public-utils--docs#theming-parameters">here</ui5-link>. If you don't
67
-
want to use CSS-in-JS library, you can also just use the corresponding CSS variable.
68
-
</>
69
-
}
70
-
/>
37
+
A full list of all supported CSS Variables can be found [here](https://github.com/UI5/webcomponents-react/blob/main/packages/base/src/styling/ThemingParameters.ts)
38
+
or in the [theming-base-content](https://github.com/SAP/theming-base-content/tree/master/content/Base/baseLib) repo.
71
39
72
40
You can then create a custom component by following this recipe:
0 commit comments