加载网页后 CSS 未呈现一秒钟

【问题标题】：CSS is not rendered for a second after loading a webpage加载网页后 CSS 未呈现一秒钟
【发布时间】：2021-01-10 20:12:14
【问题描述】：

当我加载一个使用 React、Next.js、Material UI 和 Styled-component 创建的网页时，CSS 没有呈现一秒钟。我的网站不是SSR，但是这个问题类似https://github.com/ks-rogers/react-date-picks/issues/7

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

在本地环境中，不会发生。

有谁知道如何解决这个问题？

【问题讨论】：

可能是试图加载那些女孩的同意出现在公共页面，但失败了。
这发生在其他没有图片的网站上。 @NicolasHevia

标签： reactjs typescript material-ui next.js styled-components

【解决方案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 中使用材质 ui 加载器来显示加载进度。

    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>

【讨论】：