text: import React from 'react';
  import App from 'next/app';
  import Head from 'next/head';
  import { ThemeProvider } from '@material-ui/styles';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import theme from '../src/theme';
  import { Provider } from 'mobx-react';
  import { initializeStore } from '../store';
  
  export default class MyApp extends App {
  
    static async getInitialProps(appContext) {
      // Get or Create the store with `undefined` as initialState
      // This allows you to set a custom default initialState
      const mobxStore = initializeStore()
      // Provide the store to getInitialProps of pages
      appContext.ctx.mobxStore = mobxStore
  
      let appProps = await App.getInitialProps(appContext)
  
      return {
        ...appProps,
        initialMobxState: mobxStore
      }
    }
  
    constructor(props) {
      super(props);
      const isServer = !process.browser
      this.mobxStore = isServer
        ? props.initialMobxState
        : initializeStore({
          /**Your initial props here */
        })
    }
  
    componentDidMount() {
      // Remove the server-side injected CSS.
      const jssStyles = document.querySelector('#jss-server-side');
      if (jssStyles) {
        jssStyles.parentNode.removeChild(jssStyles);
      }
    }
  
    render() {
      const { Component, pageProps } = this.props;
  
      return (
        <React.Fragment>
          <Head>
            <title>My page</title>
          </Head>
          <ThemeProvider theme={theme}>
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            <CssBaseline />
            <Provider store={this.mobxStore}>
              <Component pageContext={this.pageContext} {...pageProps} />
            </Provider>
          </ThemeProvider>
        </React.Fragment>
      );
    }
  }