Question

当我加载使用React，Next.js，Material UI和Styled-component创建的网页时，

CSS不会一秒钟呈现。我的网站不是SSR，但此问题与https://github.com/ks-rogers/react-date-picks/issues/7

类似

这是有问题的网站 https://swipe-cards.herokuapp.com/

在本地环境中不会发生。

有人知道如何解决此问题吗？

Answer 1

确保像官方示例中一样使用appjs https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_app.js
确保像示例中一样使用文档js：

https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js

此外，在您的appjs中使用Material ui loader来显示加载进度。

    import LinearProgress from '@material-ui/core/LinearProgress';
    .....
    const [isLoading, setLoadingState] = useState(false);
      useEffect(() => {

        router.events.on('routeChangeStart', () => {
          setLoadingState(true);
        });
    
        router.events.on('routeChangeComplete', () => {
          setLoadingState(false);
        });
    
        router.events.on('routeChangeError', () => {
          setLoadingState(false);
        });

....
...
  return (
    <React.Fragment>
      <Head>
      ........
      {isLoading? (  
        <>
          <div className="pageLoader">
            <LinearProgress />
          </div>

加载网页后一秒钟未渲染CSS

1 个答案: