我的简单 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/amitschandilla/proost/tree/master/web.
当我尝试使用 Material-ui 制作我的应用程序的生产版本时，我遇到了类似的问题。我设法通过添加来解决JSS提供商像这样：
import JssProvider from "react-jss/lib/JssProvider";
class App extends Component {
render() {
<JssProvider>
*the rest of your material-ui components*
</JssProvider>
}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
