@@ -13,10 +13,11 @@ If you're using more than one CSS-in-JS library in your project, we've got you c
13
13
14
14
### [ Styled Components] ( https://github.com/styled-components/styled-components )
15
15
16
- Expose styled-components as ` global.Styled ` :
16
+ Expose styled-components in your server bundle :
17
17
18
18
``` js
19
- require (' expose-loader?Styled!styled-components' );
19
+ import { ServerStyleSheet } from ' styled-components' ;
20
+ global .Styled = { ServerStyleSheet };
20
21
```
21
22
22
23
Add the render helper to the call to ` Html.React ` :
@@ -90,10 +91,11 @@ export function StyledComponentsDemo() {
90
91
91
92
### [ React-JSS] ( https://github.com/cssinjs/react-jss )
92
93
93
- Expose react-jss as ` global.ReactJss ` :
94
+ Expose react-jss in your server bundle :
94
95
95
96
``` js
96
- require (' expose-loader?ReactJss!react-jss' );
97
+ import { JssProvider , SheetsRegistry } from ' react-jss' ;
98
+ global .ReactJss = { JssProvider, SheetsRegistry };
97
99
```
98
100
99
101
Add the render helper to the call to ` Html.React ` :
@@ -179,10 +181,11 @@ export class ReactJssDemo extends React.Component {
179
181
180
182
Emotion's integration with ReactJS.NET only supports rendering inline styles (instead of rendering them in the document head).
181
183
182
- Expose emotion as ` global.EmotionServer ` :
184
+ Expose emotion in your server bundle :
183
185
184
186
``` js
185
- require (' expose-loader?EmotionServer!emotion-server' );
187
+ import { renderStylesToString } from ' emotion-server' ;
188
+ global .EmotionServer = { renderStylesToString };
186
189
```
187
190
188
191
Add the render helper to the call to ` Html.React ` :
0 commit comments