gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 04:01:20 25 4
gpt4 key购买 nike

我的简单 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 .

最佳答案

我在尝试使用 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>
}
}

关于material-ui - 将 @material-ui/core 与 NextJS/React 一起使用时的 FOUC,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55528172/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com