javascript - 将数据传递给 themeProvider

Question

我的 nextjs 项目中的 ThemeProvider 有问题。我知道将数据传递给主题的最佳方式是什么。在我的 getInitialProps 中，/pages/index我获取了设置数据，并且 ThemeProvider 标记位于/pages/_app.js包装器中<Component />。如何将数据从索引传递到 _app？任何想法？谢谢！！

这是我的代码：

/pages/_app.js

import App from "next/app";
import React from "react";
import Head from "next/head";

/* Styles */
import { ThemeProvider } from "styled-components";
import theme from "../styles/theme/primary";

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <>
        <ThemeProvider theme={theme}>  // Here ThemeProvider whit theme
          <Header />
          <Container>
            <Component {...pageProps} />
          </Container>
          <Footer />
        </ThemeProvider>
      </>
    );
  }
}

export default MyApp;

页面/index.js

import React, { useState, useEffect } from "react";

/* Others */
import { getData } from "../helper/api";

const Index = props => {
  const res = props.data;

  return (
    <>
      <Home data={res} />
    </>
  );
};

Index.getInitialProps = async ({ res }) => {
  try {
    let req = await getData(); // Here I get the settings. 
    return { data: req };
  } catch (e) {
    console.log(`Error: ${e}`);
    return { data: null};
  }
};

export default Index;

标签： javascriptreactjsnext.jsstyled-components