Question

我在将主题功能集成到使用 react-jss 的next.js项目中时遇到问题。我尝试了在文档中找到的ThemeProvider。每次，我的前端页面都会刷新两次。第一次，我可以看到CSS主题已应用，但几毫秒后，页面刷新并且主题消失了。您有解决我问题的想法吗？这是我的文件：

_document.jsx

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import {
    SheetsRegistry,
    JssProvider,
    ThemeProvider,
} from 'react-jss';

const theme = {
  colorPrimary: 'green',
};

export default class JssDocument extends Document {
  static getInitialProps(ctx) {
    const registry = new SheetsRegistry();
    const page = ctx.renderPage(App => props => (
      <ThemeProvider theme={theme}>
        <JssProvider registry={registry}>
          <App {...props} />
        </JssProvider>
      </ThemeProvider>
    ));

    return {
      ...page,
      registry,
    };
  }

  render() {
    return (
      <html lang="en">
        <Head>
          <style id="server-side-styles">
            {this.props.registry.toString()}
          </style>
        </Head>

        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

index.jsx

import React from 'react';
import injectSheet from 'react-jss';
import PropTypes from 'prop-types';

const styles = theme => ({
  myButton: {
    backgroundColor: 'black',
    color: theme.colorPrimary,
  },
});

const Index = ({ classes }) => (
  <div className={classes.myButton}>Welcome to Novatopo website!</div>
);

Index.propTypes = {
  classes: PropTypes.shape({
    myButton: PropTypes.string,
  }).isRequired,
};

export default injectSheet(styles)(Index);

_app.jsx

import App from 'next/app';    
export default class MyApp extends App {
  componentDidMount() {
    const style = document.getElementById('server-side-styles');

    if (style) {
      style.parentNode.removeChild(style);
    }
  }
}

这里有一个CodeSandbox可以重现该问题：codesandbox.io/s/pyrznxkr1j

Answer 1

我解决了这个问题。您需要在_app.jsx文件中集成ThemeProvider逻辑。

喜欢：

    export default class MyApp extends App {
        render() {
        const { Component, pageProps } = this.props;

        return (
            <ThemeProvider theme={theme}>
                <Component {...pageProps} />
            </ThemeProvider>
        );
    }
}

Answer 2

您可以做的2件事：

准备代码和框示例
在JssProvider中使用ThemeProvider

如何在JSS中使用主题功能？

2 个答案: