当将@ material-ui/core与NextJS/React一起使用时的FOUC [英] FOUC when using @material-ui/core with NextJS/React
问题描述
我简单的NextJS页面如下所示(结果可以在 https://www.schandillia.com/):
My simple NextJS page looks like this (results can be viewed at https://www.schandillia.com/):
/* eslint-disable no-unused-vars */
import React, { PureComponent, Fragment } from 'react';
import Head from 'next/head';
import compose from 'recompose/compose';
import Layout from '../components/Layout';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const styles = {
root: {
textAlign: 'center',
paddingTop: 200,
},
p: {
textTransform: 'uppercase',
color: 'red',
},
};
class Index extends PureComponent {
render() {
const { classes } = this.props;
const title = 'Project Proost';
const description = 'This is the description for the homepage';
return (
<Fragment>
<Head>
<title>{ title }</title>
<meta name="description" content={description} key="description" />
</Head>
<Layout>
<p className={classes.p}>amit</p>
<Button variant="contained" color="secondary">
Secondary
</Button>
</Layout>
</Fragment>
);
}
}
export default withStyles(styles)(Index);
我正在从@material-ui/core库中导入一堆组件来设置样式.我还有一个分配给style常量的本地样式定义.
I am importing a bunch of components off the @material-ui/core library to style my items. I also have a local style definition assigned to a style constant.
这里似乎正在发生的事情是我的样式没有在服务器上呈现，这就是为什么在加载时提供的文件是无样式的.然后CSS由客户端代码呈现.结果，出现了一阵未样式化的内容，持续了将近一秒钟，足以引起人们的注意.
What seems to be happening here is that my style isn't getting rendered on the server which is why the files being served upon load are sans-style. And then the CSS gets rendered by the client-side code. As a result, there's a flash of unstyled content that lasts almost a second, long enough to be noticable.
有什么办法解决这个问题?整个代码库可供参考，网址为 https://github.com/amitschandillia/proost/树/主控/网络.
Any way to fix this? The entire codebase is up for reference at https://github.com/amitschandillia/proost/tree/master/web.
推荐答案
在尝试制作使用Material-ui的应用的生产版本时，我遇到了类似的问题.我设法通过添加 JSS Provider 来解决:
I ran a similar problem when tried to make a production build of my app, that uses material-ui. I manage to solve by adding a JSS Provider like this:
import JssProvider from "react-jss/lib/JssProvider";
class App extends Component {
render() {
<JssProvider>
*the rest of your material-ui components*
</JssProvider>
}
}
这篇关于当将@ material-ui/core与NextJS/React一起使用时的FOUC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
