Как я могу использовать функциональность темы с JSS? - PullRequest
Новая
       11

Как я могу использовать функциональность темы с JSS?

0 голосов
/ 20 ноября 2018

У меня проблема с интеграцией функциональности тем в мой проект next.js, использующий реаги-jss .Я попробовал 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

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Я решил проблему.Вам необходимо интегрировать логику ThemeProvider в файл _app.jsx.

Вот так: 

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

        return (
            <ThemeProvider theme={theme}>
                <Component {...pageProps} />
            </ThemeProvider>
        );
    }
}
0 голосов
/ 20 ноября 2018

2 вещи, которые вы можете сделать:

  1. подготовить пример кодов и ящиков
  2. использовать ThemeProvider внутри JssProvider
...