当将@ material-ui/core与NextJS/React一起使用时的FOUC

本文介绍了当将@ material-ui/core与NextJS/React一起使用时的FOUC的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我简单的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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！