MUI React SSR 问题

Question

MUI React SSR 问题

Car*_*ter 5 reactjs material-ui server-side-rendering

我们正在使用 React-MUI 为现有项目设置服务器端渲染。除了造型之外，我们已经把一切都准备好了。我们的 CSS 都不会加载到服务器端渲染。任何内联 CSS 都可以正常工作，但在文件开头定义并绑定的任何工作表都export default withStyles(styles)(Page)不起作用。

我们的样式定义如下：

const styles = (theme) => ({ 
    root{
        //some CSS Here ...
    }...
});

Run Code Online (Sandbox Code Playgroud)

然后必然会倒出道具

export default typeof window !== 'undefined'
    ? withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Home)))
    : withStyles(styles)(Home);

Run Code Online (Sandbox Code Playgroud)

并通过以下方式访问

const {classes} = this.props;
//then in render
<div className={classes.root}>...</div>

Run Code Online (Sandbox Code Playgroud)

所有classes.someClassNameCSS 在服务器端渲染中都不起作用，但当我们在浏览器中渲染时，它会正常工作。当前的想法是尝试使用<ThemeProvider/>MUI 的包装器，但任何建议都会受到赞赏。

谢谢！

Answer 1

Car*_*ter 2

感谢@ReedDunkle 对此的指点。最终通过使用他的链接指南作为参考来使其正常工作。我最终只需要添加CSS sheets.collect(...)，css = sheets.toString()然后将其包含在 HTML 文档的标头中。不需要了ThemeProvider，现在使用起来一切都很好WithStyles。

所以基本上它看起来像：

const html = renderToString(sheets.collect(<App/>));

const css = sheets.toString();

//...
//In your SSR HTML

<head>
<style id="jss-server-side">${css}</style>
...
</head>
...
<div id=react-root>{html}</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，3 月前
查看次数：	1995 次
最近记录：	4 年，9 月前