Material-UI 刷新后中断

Question

我正在使用 material UI 和 Next.js。我运行 npm run dev。我的问题是，每当我按下浏览器上的重新加载按钮时，网站上的样式就会完全中断。这是正常行为吗？似乎 Material-UI 停止工作了。

这是我的代码。

我有一个 index.js 和一个组件。

指数

import React, { Component } from 'react'
import CssBaseline from '@material-ui/core/CssBaseline';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import AppBar from '../components/NavBar/NavBar';

const theme = createMuiTheme({
  palette: {
      primary: {
        main: '#f28411',
      },
  },
});


class App extends Component {
  render() {
    return (
        <MuiThemeProvider theme={theme}>
        <React.Fragment>
            <CssBaseline />
            <AppBar />
        </React.Fragment>
        </MuiThemeProvider>
    )
  }
}
export default App

分量

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'

class NavBar extends Component {
    render() {
        const { classes } = this.props;

        return(
            <div>
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="title" color="inherit">
Test                        
</Typography>
                </Toolbar>
            </AppBar>
            </div>
        );
    }
}

const styles = theme => ({
  title: {
    color: '#FFF',
  },
});

NavBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(NavBar);

Answer 1

您可能需要一个 babel plugin。

在您的包裹中，添加

npm install --save-dev babel-plugin-styled-components

在您的.babelrc中添加

{
  "plugins": [
    [ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
  ]
}

让我知道这是否有效。

Answer 2

我遇到了同样的问题，但没有使用 styled-components，所以上面的答案不适用，所以我想我会 post 以防这对其他人有帮助。要解决此问题，我只需在 material-ui 示例中包含的 pages/ 目录下添加 _document.js 文件：

import React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheets } from '@material-ui/core/styles'
import theme from '../shared/utils/theme'

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang='en'>
        <Head>
          <meta name='theme-color' content={theme.palette.primary.main} />
          <link
            rel='stylesheet'
            href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets()
  const originalRenderPage = ctx.renderPage

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    })

  const initialProps = await Document.getInitialProps(ctx)

  return {
    ...initialProps,
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  }
}

Answer 3

事实证明，您不能像使用 React 应用程序那样使用 Next JS 的所有第三方库。您需要修改您的 pages/_document.js 和 pages/_app.js。此外，您将需要 theme.js 来配置 Material UI 颜色和其他默认样式。您可以将 theme.js 添加到任何文件夹，在我的例子中它位于 helpers 文件夹中。

_app.js

import React from "react";
import App from "next/app";
import theme from '../helpers/theme';  // needed for Material UI
import CssBaseline from '@material-ui/core/CssBaseline';
import {ThemeProvider} from '@material-ui/core/styles';


class MyApp extends App {

   static async getInitialProps({Component, ctx}) {
      const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
      //Anything returned here can be accessed by the client
      return {pageProps: pageProps};
   }

   render() {
      const {Component, pageProps, router} = this.props;

      return (
          <ThemeProvider theme={theme}>
             <CssBaseline />
              {/* default by next js */}
              <Component {...pageProps}/>
          </ThemeProvider>
      )
   }
}

export default MyApp

_document.js

import Document, {Html, Head, Main, NextScript} from "next/document";
import theme from '../helpers/theme';
import { ServerStyleSheets } from '@material-ui/core/styles';
import React from "react";

export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
      const initialProps = await Document.getInitialProps(ctx);
      let props = {...initialProps};

      return props;
   }

   render() {
      return (
          <Html>
             <Head>
                <meta name="theme-color" content={theme.palette.primary.main} />
             </Head>
             <body>
             <Main/>
             <NextScript/>
             </body>
          </Html>
      );
   }
}


MyDocument.getInitialProps = async (ctx) => {
   const sheets = new ServerStyleSheets();
   const originalRenderPage = ctx.renderPage;

   ctx.renderPage = () =>
       originalRenderPage({
          enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
       });

   const initialProps = await Document.getInitialProps(ctx);

   return {
      ...initialProps,
      // Styles fragment is rendered after the app and register rendering finish.
      styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
   };
};

theme.js

import { createMuiTheme } from '@material-ui/core/styles';
import { red } from '@material-ui/core/colors';

// Create a theme instance.
const theme = createMuiTheme({
   palette: {
      primary: {
         main: '#FFF212',
      },
      secondary: {
         main: '#FFF212',
      },
      error: {
         main: red.A400,
      },
      background: {
         default: '#fff',
      },
   },
});

export default theme;

Github https://github.com/vercel/next.js/tree/canary/examples 中有一个很棒的存储库在那里你可以找到一个库列表，以及在 Next JS 应用程序中使用它们的正确方法。

对于您的情况，这里是 link：https://github.com/vercel/next.js/tree/canary/examples/with-material-ui。

Material-UI 刷新后中断

Material-UI breaks after refreshing

javascript

reactjs

material-ui

next.js