Skip to content

Commit 7e9a35f

Browse files
authored
docs: improve staticCssInjected description (#7421)
1 parent c0d745a commit 7e9a35f

File tree

2 files changed

+16
-2
lines changed

2 files changed

+16
-2
lines changed

docs/knowledge-base/ServerSideRendering.mdx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,16 @@ We have templates available for both the pages and the app router.
2626

2727
In case you already have an existing Next.js project and want to add UI5 Web Components for React to it, you first need to follow our [general Getting Started Guide](?path=/docs/getting-started--docs#add-ui5webcomponents-react-to-an-existing-app).
2828

29-
For a better SSR support, we recommend importing our stylesheet bundle inside the `_app` file or the root layout (depending on whether you are using the pages or the app router) and set the `staticCssInjected` prop on our `ThemeProvider`:
29+
For better SSR support (i.a. to prevent flickering), we recommend importing our stylesheet bundle inside the `_app` file or the root layout (depending on whether you are using the pages or the app router) and set the `staticCssInjected` prop on our `ThemeProvider`:
30+
31+
**Note:** Only import the stylesheets of the packages you are actually using.
3032

3133
```tsx
32-
import '@ui5/webcomponents-react/styles.css';
34+
import '@ui5/webcomponents-react/styles.css'; // main package styles
35+
// Required only when using the corresponding package
36+
import '@ui5/webcomponents-react-charts/styles.css'; // chart package styles
37+
import '@ui5/webcomponents-react-compat/styles.css'; // compat package styles
38+
3339

3440
export default function AppOrRootLayout() {
3541
// ...

packages/charts/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,14 @@ To use this library with React 19 you have to override your `react-is` version t
3232
},
3333
```
3434

35+
## Static CSS
36+
37+
If you’ve enabled `staticCSSInjected` on the `ThemeProvider` component ([learn more here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-server-side-rendering--docs#add-to-existing-project)), make sure to also import the `charts` stylesheet. Otherwise, charts won’t be rendered correctly.
38+
39+
```ts
40+
import '@ui5/webcomponents-react-charts/styles.css';
41+
```
42+
3543
## Documentation
3644

3745
You can find an interactive documentation in our [Storybook](https://sap.github.io/ui5-webcomponents-react/).

0 commit comments

Comments
 (0)