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

【问题标题】：How can I use theme functionality with JSS?如何在 JSS 中使用主题功能？
【发布时间】：2019-04-22 17:25:23
【问题描述】：

我在使用 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

【问题讨论】：

我的页面被渲染了两次。我认为主题样式适用于服务器端渲染过程，但在浏览器渲染过程中会立即被组件样式替换。你对此有什么感觉？我该如何解决我的问题？

标签： javascript reactjs next.js jss

【解决方案1】：

你可以做的两件事：

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

【讨论】：

我在 JssProvider 中切换了 ThemeProvider 但没有任何变化。我会准备一个codesandbox的例子，谢谢。
这里是我的密码箱：codesandbox.io/s/pyrznxkr1j你有什么想法吗？ ?

【解决方案2】：

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

这样：

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

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

【讨论】：