Question

我简单的NextJS页面如下所示（可以在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常量的本地样式定义。

这里似乎正在发生的事情是我的样式没有在服务器上呈现，这就是为什么在加载时提供的文件是无样式的。然后CSS由客户端代码呈现。结果，出现了一阵未样式化的内容，持续了将近一秒钟，足以引起人们的注意。

有什么办法解决这个问题？整个代码库可在https://github.com/amitschandillia/proost/tree/master/web处参考。

Answer 1

当尝试使用Material-ui制作应用程序的生产版本时，我遇到了类似的问题。我设法通过添加一个JSS Provider来解决此问题：

import JssProvider from "react-jss/lib/JssProvider";

class App extends Component {
  render() {
    <JssProvider>
      *the rest of your material-ui components*
    </JssProvider>
  }
}

Answer 2

这是解决方案 - https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js .

基本上，您需要做的就是将服务器端类名与客户端同步。上面的链接显示了解决该问题所需的操作。

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

2 个答案: