Javascript 如何在JSS中使用主题功能？_Javascript_Reactjs_Next.js_Jss

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

javascript reactjs next.js

Javascript 如何在JSS中使用主题功能？,javascript,reactjs,next.js,jss,Javascript,Reactjs,Next.js,Jss,在使用react jss的next.js项目中集成主题化功能有一个问题。我试过在文档中找到的ThemeProvider。每次，我的首页都会刷新两次。第一次，我可以看到CSS主题是apply，但几毫秒后，页面刷新和主题消失。你有办法解决我的问题吗？这是我的档案： \u document.jsx import React from 'react'; import Document, { Head, Main, NextScript } from 'next/document'; import {

在使用react jss的next.js项目中集成主题化功能有一个问题。我试过在文档中找到的ThemeProvider。每次，我的首页都会刷新两次。第一次，我可以看到CSS主题是apply，但几毫秒后，页面刷新和主题消失。你有办法解决我的问题吗？这是我的档案：

\u 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>
    );
  }
}

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);

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示例

在JssProvider中使用EProvider

我解决了这个问题。您需要在

\u app.jsx

文件中集成ThemeProvider逻辑

就像这样：

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

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

导出默认类MyApp扩展应用程序{
render（）{
const{Component，pageProps}=this.props；
返回(
);
}
}

我在JssProvider中切换了EProvider，但没有任何变化。我将准备一个codesandbox示例，谢谢。这里是我的codesandbox：你有什么想法吗？我的页面呈现了两次。我认为在服务器端渲染过程中会应用主题样式，但在浏览器渲染过程中会立即被组件样式替换。你对此有什么感觉？我怎样才能解决我的问题？