Closed arfianadam closed 6 years ago
What you are describing is the expected behavior.
You are calling ReactDOM.renderToString()
after sheetsRegistry.toString()
.
You need to reverse the calls. It's ReactDOM.renderToString()
how is adding the CSS to the sheet registry.
@oliviertassinari Hi bro, I have the empty string problem too, but not like this calling renderToString
after sheetsRegistry.toString
, my problem is sheetsRegistry.toString
can generate stylesheet string correctly in the "first call", but after that, the sheetsRegistry.toString
just return empty string, I'm not sure if it's related to this one, so I just put it here first.
import { renderToString } from "react-dom/server";
import React from "react";
import { createGenerateClassName } from "material-ui/styles";
import { SheetsRegistry } from "react-jss/lib/jss";
import JssProvider from "react-jss/lib/JssProvider";
import Button from "material-ui/Button";
function render() {
const sheetsRegistry = new SheetsRegistry();
const generateClassName = createGenerateClassName();
const str = renderToString(
<JssProvider
registry={sheetsRegistry}
generateClassName={generateClassName}
>
<Button>Default</Button>
</JssProvider>
);
const css = sheetsRegistry.toString();
console.log(css.length);
}
render();
render();
The second console.log will print 0, what did I do wrong in SSR? In case that you might need to reproduce it ssr
@cyl19910101 Posting this issue on StackOverflow would be much more efficient. The stylesheets are generated only once per component type (for performance). We use a cache. You need to clear this cache between two requests. It's what the sheetsManager
is for in the guide.
@oliviertassinari Thanks a lot! I was thinking that according to that guide if I don't need to override the default them then I don't need to wrap the application under MuiThemeProvider
....
@oliviertassinari @cyl19910101 so how can i clear cache? Lose many time for this problem..(
@Fi1osof The cache is stored in the sheetsManager
. It's a simple Map
object. You can provide a new one to clear the cache.
@oliviertassinari It`s my mistake... mui@next do not requries MuiThemeProvider, and i have not this component in my code. yes, later i added this component and this solves my problem. Thanks for answer!
@oliviertassinari Hi bro, I have the empty string problem too, but not like this calling
renderToString
aftersheetsRegistry.toString
, my problem issheetsRegistry.toString
can generate stylesheet string correctly in the "first call", but after that, thesheetsRegistry.toString
just return empty string, I'm not sure if it's related to this one, so I just put it here first.import { renderToString } from "react-dom/server"; import React from "react"; import { createGenerateClassName } from "material-ui/styles"; import { SheetsRegistry } from "react-jss/lib/jss"; import JssProvider from "react-jss/lib/JssProvider"; import Button from "material-ui/Button"; function render() { const sheetsRegistry = new SheetsRegistry(); const generateClassName = createGenerateClassName(); const str = renderToString( <JssProvider registry={sheetsRegistry} generateClassName={generateClassName} > <Button>Default</Button> </JssProvider> ); const css = sheetsRegistry.toString(); console.log(css.length); } render(); render();
The second console.log will print 0, what did I do wrong in SSR? In case that you might need to reproduce it ssr
I had this issue too. Then I found that if I add sheetsManager={new Map()}
to MuiThemeProvider
, the problem solved.
Expected Behavior
The
console.log(css)
returns some CSS as string (?)Current Behavior
The
console.log(css)
returns empty string""
. Therefore my renderedmaterial-ui
components don't have styles.Steps to Reproduce
I followed all steps in the official guide https://material-ui.com/guides/server-rendering/. And here is some sample of my code:
The response I got from initial render is correct, for example this
AppBar
componentRendered to string as
Context
Just trying to accomplish simple SSR by following official guide.
My Environment