Context does not apply through <Main /> #873

Ehesp · 2017-01-24T19:39:20Z

Hello,

I'm currently using material-ui in my app. I'm taking advantage of pages/_document.js, along with <Main />:

// pages/_document.js

render() {
    return (
 <html>
        <Head>
        </Head>
        <body>
            <MuiThemeProvider muiTheme={{ ... ]}>
              <Main />
            </MuiThemeProvider>
          <NextScript />
        </body>
      </html>
    );
}

Then the page being loaded:

// pages/index.js
render() {
    console.log(this.context.muiTheme) // undefined
    return (...);
}
...
Index.contextTypes = {
    muiTheme: React.PropTypes.object.isRequired
};

So normally, the context would be passed through and I'd have access to the theme properties, and so would any material-ui components. However, in this case the context is not being applied.

Logging out the context in the Main source code works.

Is this expected?
Is there any work around?

The text was updated successfully, but these errors were encountered:

arunoda · 2017-01-24T19:52:55Z

@Ehesp can I have a sample repo. So, I could work on this pretty fast.

Ehesp · 2017-01-24T20:13:08Z

Sure, should hopefully be able to slap something up in the next couple of hours. On 24 Jan 2017 7:53 pm, "Arunoda Susiripala" <notifications@github.com> wrote: @Ehesp <https://github.com/Ehesp> can I have a sample repo. So, I could work on this pretty fast. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#873 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAzZXiaxLrsVrtxGgaZyea1Z3e7EK3pJks5rVlacgaJpZM4Lsscv> .

Ehesp · 2017-01-24T21:56:22Z

@arunoda Here you go: https://github.com/Ehesp/next-mui-context

Install modules and just npm run dev. So basically the _default.js file wraps the entire application in MuiThemeProvider. Under the hood this just provides context to the app. The MUI component within index.js (<RaisedButton ...>) then uses this context to apply the theme. Currently it errors with TypeError: Cannot read property 'prepareStyles' of undefined, which means there's no context (mui/material-ui#5330 (comment)).

In Index, if you comment out render and uncomment the currently commented ones, it works.

arunoda · 2017-01-25T03:17:18Z

@Ehesp hey, I checked it and unfortunately that's something you can't do.
The idea behind the _document.js is to customize the base HTML document of the app.
Although it uses React, it's something only runs on the server. So, React is just an API to customize the base HTML page.

Actual, Next.js app is runs inside the <Main/>. So, basically that's where the react's root element lives.

So, you need to provide your MUI context in the page's render method.

arunoda · 2017-01-25T03:24:53Z

Also there's a problem with the SSR when doing styles. Check the console.
That's because of the userAgent mismatch in the server and client.

Here's a easy and ugly fix: mui/material-ui#3009 (comment)

But here's the proper way to do it:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';

export default class extends React.Component {

    static getInitialProps = ({ req }) => {
        const userAgent = req? req.headers['user-agent'] : navigator.userAgent
        return { userAgent }
    }

    render() {
        const { userAgent } = this.props
        return (
            <div>
                <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme, { userAgent })}>
                    <div>
                        <p>Render a styled MUI Button: </p>
                        <RaisedButton label="Button" primary style={{ margin: 12 }} />
                    </div>
                </MuiThemeProvider>
            </div>
        );
    }
}

mistakenelf · 2017-01-25T03:25:20Z

I use material-ui in my app. I created a layout component that will just wrap whatever is passed into the layout component with the theme provider. Is that what your trying to accomplish?

Ehesp · 2017-01-25T07:22:51Z

Hey. Thanks for checking that out. That's fine then, I'll make a decorator to contain each of the pages. I'm assuming this is going to be the same as Redux then using Provide. Cheers

…

On 25 Jan 2017 3:25 am, "Tyler Knipfer" ***@***.***> wrote: I use material-ui in my app. I created a layout component that will just wrap whatever is passed into the layout component. Is that what your trying to accomplish? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#873 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAzZXjsgrkktK37JGYjglSTNAbMW4T9Pks5rVsCkgaJpZM4Lsscv> .

Ehesp · 2017-01-25T07:58:58Z

@arunoda #590

I believe this is a similar issue. If wrapping each page item in Provider, which provides store context is rerendered on each page load how is state supposed to be persisted? Each page would have a fresh store.

It's almost as if there needs to be a React wrapper for every page?

Ehesp · 2017-01-25T10:12:06Z

For those interested, here's the solution we took, handles both Redux & Material-UI:

// pages/index.js
function Index() {
    ...
}

export default Page(connect()(Index));

Every page is wrapped in a Page decorator/HOC, which does the following:

const decorator = (ComposedComponent) => {
  return class extends Component {

    static async getInitialProps(ctx) {
      const { req } = ctx;
      const isServer = !!req;
      const userAgent = req ? req.headers['user-agent'] : navigator.userAgent;

      // Second param here is initial redux state on the server
      const store = initStore(reducers, {}, isServer);

      let pageProps = {};

      if (ComposedComponent.getInitialProps) {
        pageProps = await ComposedComponent.getInitialProps(ctx);
      }

      return {
        ...pageProps,
        initialState: store.getState(),
        isServer,
        userAgent,
      };
    }

    constructor(props) {
      super(props);
      this.store = initStore(reducers, props.initialState, props.isServer)
    }

    render() {
      return (
        <div>
          <Provider store={this.store}>
            <MuiThemeProvider muiTheme={getMuiTheme({ userAgent: this.props.userAgent })}>
              <ComposedComponent
                {...this.props}
              />
            </MuiThemeProvider>
          </Provider>
        </div>
      )
    }
  };
};

export default decorator;

This now provides Redux & MUI throughout every page. It also allows the actual page file to use getInitialProps as well, using the following lines in the decorator:

      if (ComposedComponent.getInitialProps) {
        pageProps = await ComposedComponent.getInitialProps(ctx);
      }

These are then applied into the props of the contained page/component.

timneutkens · 2017-01-25T12:20:26Z

@arunoda should we create an example showing how to use material-ui with next.js? We've had questions about material-ui multiple times 😄

arunoda · 2017-01-25T16:55:07Z

@timneutkens why not :)

maxs15 · 2017-03-20T13:48:47Z

Hey @arunoda, really like the library but this is a main issue in my opinion.
It looks like there is currently no way for a component to live globally in the app ?
Would be nice to have a place to declare components outside the pages.

ryanbas21 · 2017-06-10T16:08:30Z

A solution that I just wrote and havent fully tested out but seems to be working is

HOC

import { compose } from 'redux';
import withRedux from 'next-redux-wrapper';
import store from '../../store/index';
import { userAgent, withMuiTheme } from './withMUITheme';

// compose higher order Component
export default compose(withMuiTheme(userAgent), withRedux(store));

import React from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

export const userAgent = getMuiTheme({ userAgent: false });
export const withMuiTheme = userAgent => Component => () =>
  <div>
    <MuiThemeProvider muiTheme={userAgent}>
      <Component />
    </MuiThemeProvider>
  </div>;

then my page can be exported

import withMUITheme from '../MaterialHOC/index';
const Board = () =>
  <div>
    <TeamMembers />
    <Navbar team={"Ryan's Team"} />
    <TeamStatus />
    <Checkin />
  </div>;

export default withMUITheme(Board);

Ehesp changed the title ~~Context does not apply to <Main />~~ Context does not apply through <Main /> Jan 24, 2017

arunoda added the Type: Bug label Jan 24, 2017

arunoda closed this as completed Jan 25, 2017

arunoda removed the Type: Bug label Jan 25, 2017

timneutkens mentioned this issue Jan 25, 2017

Add material-ui example #882

Closed

arunoda mentioned this issue Jan 26, 2017

Global styles not applied until page refresh #885

Closed

timneutkens mentioned this issue Feb 8, 2017

Styles do not get applied from _document.js with getInitialProps are called #1035

Closed

davidascher mentioned this issue Apr 26, 2017

Add Material-UI example #1771

Merged

lock bot locked as resolved and limited conversation to collaborators May 11, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Context does not apply through <Main /> #873

Context does not apply through <Main /> #873

Ehesp commented Jan 24, 2017

arunoda commented Jan 24, 2017

Ehesp commented Jan 24, 2017 via email

Ehesp commented Jan 24, 2017

arunoda commented Jan 25, 2017

arunoda commented Jan 25, 2017

mistakenelf commented Jan 25, 2017 •

edited

Loading

Ehesp commented Jan 25, 2017 via email

Ehesp commented Jan 25, 2017

Ehesp commented Jan 25, 2017

timneutkens commented Jan 25, 2017

arunoda commented Jan 25, 2017

maxs15 commented Mar 20, 2017

ryanbas21 commented Jun 10, 2017 •

edited

Loading

Context does not apply through <Main /> #873

Context does not apply through <Main /> #873

Comments

Ehesp commented Jan 24, 2017

arunoda commented Jan 24, 2017

Ehesp commented Jan 24, 2017 via email

Ehesp commented Jan 24, 2017

arunoda commented Jan 25, 2017

arunoda commented Jan 25, 2017

mistakenelf commented Jan 25, 2017 • edited Loading

Ehesp commented Jan 25, 2017 via email

Ehesp commented Jan 25, 2017

Ehesp commented Jan 25, 2017

timneutkens commented Jan 25, 2017

arunoda commented Jan 25, 2017

maxs15 commented Mar 20, 2017

ryanbas21 commented Jun 10, 2017 • edited Loading

mistakenelf commented Jan 25, 2017 •

edited

Loading

ryanbas21 commented Jun 10, 2017 •

edited

Loading