Question

我正在将材料UI与Next.js一起使用。我正在System.Media.SoundPlayer player = new System.Media.SoundPlayer(@""); player.Play();上跑步。我的问题是，每当我按下浏览器上的重新加载按钮时，网站上的样式就会完全中断。这是正常行为吗？似乎Material-UI停止工作。

这是我的代码。

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

索引

npm run dev

组件

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

Answer 1

我遇到了同样的问题，但是没有使用样式化组件，因此上述答案不适用，因此我认为我会发表，以防其他人受到影响。为了解决这个问题，我只需要在material-ui示例中包含的_document.js目录下添加pages/文件：

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 2

为此，您可能需要通行证plugin。

在您的包裹中，添加

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

在您的.babelrc中，添加

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

让我知道这是否可行。

Answer 3

事实证明，您无法像使用 React 应用程序那样使用 Next JS 的所有第三方库。 Github 中有一个很棒的存储库 https://github.com/vercel/next.js/tree/canary/examples 在那里，您可以找到在 Next JS 应用程序中正确使用它们的库列表。对于您的情况，这里是链接：https://github.com/vercel/next.js/tree/canary/examples/with-material-ui。如上例所示，您需要修改您的 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;

刷新后Material-UI中断

3 个答案: