Material-ui: [Docs] Add new muiTheme setup requirements to docs + readme

[be-next-hotdog]

Problem Description

Yopp guys,

After updated to latest version (MUI = 0.15.0-beta.1, react, react-dom = 15.0.1), I caught several errors from my inspector :

1. Warning: Failed Context Types: Required context muiTheme was not specified in Paper.
2. Uncaught TypeError: Cannot read property 'prepareStyles' of undefined
3. Uncaught TypeError: Cannot read property '__reactInternalInstance$f2gyonourkjfu80wspjh5mi' of null

Any tips help me escape from these bugs weirdo ?

Be grateful for your reply.

Versions

• Material-UI: 0.15.0-beta.1
• React: 15.0.1
• Browser: Chrome ver. 49

[codinronan]

@be-next-hotdog Are you wrapping your top level components in MuiThemeProvider and passing it a theme? This is now required in MUI beta.1. We had a merry go round too, updating our tests but actually it's better this way - makes consistent theming easier.

Those errors are a result of muiTheme not exising in the context - which means MuiThemeProvider or one of the other wrappers that inject the theme are not being used.

[nathanmarks]

@newoga We need to make this loud and clear in the README/docs

[newoga]

@newoga We need to make this loud and clear in the README/docs

I agree.

[be-next-hotdog]

Aye, thanks a lot, that will be great.

[Kielan]

I believe this has changed again or the documentation is incomplete.

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Appbar from 'material-ui/AppBar';
import * as mui from 'material-ui';
const AppbarStyles = getMuiTheme({
    palette: {
    accent1Color: deepOrange500,
    }
});
          <MuiThemeProvider muiTheme={AppbarStyles()}>
               <Appbar title="create campaign" />
            </MuiThemeProvider />

Now Where do I configure ThemeManager to solve this error

Unhandled promise rejection TypeError: Cannot read property 'ThemeManager' of undefined

P.S. error messages could really use an improvement!

[oliviertassinari]

@Kielan What version of Material-UI are you using? ThemeManager was deprecated, it's no longer supposed to be used. I see at least 3 issues with your code example. Try resolving them first.

[mpint]

Hey guys, having a hard time finding an answer to this question re: MuiThemeProvider, so hope you can help me out.

Is it possible to wrap your entire app in a single MuiThemeProvider instead of having to wrap each component separately?

I saw the docs under "Themes > Using context", but am still unclear if this is an actual solution.

Could someone point me in the right direction to get this done?

[mbrookes]

@mpint

Is it possible to wrap your entire app in a single MuiThemeProvider instead of having to wrap each component separately?

That's exactly what you should be doing, and exactly what MuiThemeProvider is designed for. Would have been quicker for you to try than to ask on an old issue! 😜

[mpint]

Sorry, just looking for some definite direction as I'm trying to juggle 12 different things here on a short timeline. Is there a working example you could point me towards?

[dwilt]

I'm only using the SVGIcons from MUI and I'm getting this error:

Failed Context Types: Required context `muiTheme` was not specified in `SvgIcon`. Check the render method of `ContentClear`

Do I really need to wrap my entire app with the MuiThemeProvider instead of doing just what I was doing before:

import Clear from 'material-ui/svg-icons/content/clear';

 <Clear className={styles.close} color={'#333'}/>

^^ this used to work

I also don't see the icon docs update this way... http://www.material-ui.com/#/components/svg-icon

[oliviertassinari]

Do I really need to wrap my entire app with the MuiThemeProvider

For the time beeing, yes you do.
We have done this change to simplify each component implementation.

[andresin87]

@Kielan made a little mistake in his explanation. AppbarStyles must be a function. So this works for me

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Appbar from 'material-ui/AppBar';
import BaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import * as mui from 'material-ui';
import { storiesOf, action } from '@kadira/storybook';

const AppbarStyles = () => getMuiTheme({
  palette: {
    primary1Color: '#f4511e'
  }
});

storiesOf('Appbar', module)
.add('Default', () => (
  <MuiThemeProvider muiTheme={AppbarStyles()}>
    <Appbar title="Appbar Default" />
  </MuiThemeProvider>
));

I supose you all realise I'm using react-storybook to checkout the changes.

You can check my example at https://andresin87.github.io/react-storybook/

..and the code at https://github.com/andresin87/react-storybook/tree/feature/material-ui

[NeXTs]

@andresin87 @oliviertassinari As I noticed from Andrés examples every component wrapped in MuiThemeProvider, does every component really should be wrapped in MuiThemeProvider??

This can not be done only once somewhere at the top?

[oliviertassinari]

This can not be done only once somewhere at the top?

@NeXTs This can and should be done once at a higher level in the React tree. We could probably improve the documentation here http://www.material-ui.com/#/get-started/usage.

[horte]

This is problematic when writing tests for pure components which don't really care about the theme.
Is there a suggestion for how to solve this?

Instead of this:

_wrapper = mount(<MuiThemeProvider><Counter {..._props} /></MuiThemeProvider>)

I want to do this:

_wrapper = mount(<Counter {..._props} />)

[oliviertassinari]

@horte The muiTheme changed multiple time in the part. From not required to required to no required and finaly to required. I'm not sure that it will change again anytime soon. Your solution seems to be the best available as we are speaking.

[ChoppyThing]

Hi, i'm getting similar context issues with muiTheme while trying to initialize material ui in a new project. Working with react 15.2.1 and material 0.15.2 i've tried all solutions from this post and this one and last issues seem to be this.context.muiTheme is undefined

I followed examples from here

// App.jsx
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';

const AppbarStyles = () => getMuiTheme({
  palette: {
    primary1Color: '#f4511e'
  }
});

render: function() {
    return (
      <div className="app">
        <div className="main">
          <Link to={`/blog`}>Is that ?</Link>
        </div>
        <MuiThemeProvider muiTheme={AppbarStyles()}>
          {this.props.children}
        </MuiThemeProvider>
      </div>
    );
  }

// Blog.jsx
import RaisedButton from 'material-ui/RaisedButton';

  render: function() {
    return (
      <div className="blog">
        Blog

        <Note notes={this.state.notes} />

        <RaisedButton label="Default" />

        <Page 
            page={this.props.params.page}
            total={this.state.total}
            number={this.state.number}
        />
        {this.props.params.page}

        <Link to={`/`}>Is that?</Link>
      </div>
    );
  }

Am i missing something ?