I cannot use material-ui components after update to material-ui@0.15.0-beta.1

Question

I got this message in my console:

Failed Context Types: Required context muiTheme was not specified in AppBar

AppBar.js:158 Uncaught TypeError: Cannot read property 'prepareStyles' of undefined

I just have an AppBar in my Component I think it should work but... here my very simple code:

import React from 'react';
import {AppBar} from 'material-ui';


    export class MyComponent extends React.Component {

        render() {
            return (
                <div>
                    <AppBar
                        title="Title"
                    />

                </div>
            );
        }

    }

thanks for helping...

score 33 · Accepted Answer · answered Apr 30 '16 at 13:33

With material-ui@0.15.0.beta-1 a few things were changed.

You can have a look on the link below for more details. https://github.com/callemall/material-ui/blob/master/CHANGELOG.md

Therefore with those changes your code becomes:

    import React from 'react';
    import AppBar from 'material-ui/AppBar';
    import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
    import getMuiTheme from 'material-ui/styles/getMuiTheme';

        export class MyComponent extends React.Component {

            getChildContext() {
                return { muiTheme: getMuiTheme(baseTheme) };
            }

            render() {
                return (
                    <div>
                        <AppBar
                            title="Title"
                        />

                    </div>
                );
            }        
        }

        MyComponent.childContextTypes = {
            muiTheme: React.PropTypes.object.isRequired,
        };

Why do they make it more complicated? It would be great if I can write less code to get it to work. — newguy, Nov 04 '16 at 03:45
I've just swapped from Bootstrap to MUI and now I see this... Crazy that everything needs to be wrapped liek this, is there a way to do it globally I wonder? — rob_was_taken, Nov 05 '16 at 18:07

Dusan Plavak · Answer 2 · 2016-06-15T09:07:51.337

20

now in the 0.15.0 you can use muiThemeProvider:

...

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
 <MuiThemeProvider muiTheme={getMuiTheme()}>
    <MyAwesomeReactComponent />
 </MuiThemeProvider>
)

...

So you do not have to provide context to childrens manualy. More info in documentation.

edited Jun 15 '16 at 09:07

answered Jun 15 '16 at 08:15

Dusan Plavak

4,457
4
24
35

@BruceSun yes I am using it in 2 projects. – Dusan Plavak Aug 12 '16 at 08:22
2

I found the reason - it doesn't work if I define my component using React.createClass(), but works if I create a ES6 class extending React.Component. I didn't find any documentation about this though. – Bruce Sun Aug 17 '16 at 01:43
@BruceSun - I believe it is recommended that you start defining your React components with the ES2015 syntax henceforth. – Con Antonakos Sep 05 '16 at 22:28
But this doesn't work with jest testing individual components. Am I missing something. – Viraths Jun 05 '17 at 02:02
@Viraths you can create helper function which will wrap your tested component with MuiThemeProvider if you need it. And then use wrapper.dive() to get to the actual component instead of that provider... – Dusan Plavak Jun 05 '17 at 11:55
the question has 'appbar' but in your example you dont' use appbar – stackdave Sep 03 '17 at 09:51
@stackdave you can put AppBar instead of MyAwesomeReactComponent – Dusan Plavak Sep 04 '17 at 11:01

score 5 · Answer 3 · answered Mar 06 '18 at 19:19

Import MuiThemeProvider and then wrap the material-ui component AppBar with MuiThemeProvider.

import React, { Component } from 'react';
import AppBar from 'material-ui/AppBar';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import './App.css';

class App extends Component {

  render() {

    return ( 
      <MuiThemeProvider>
        <div>
          <AppBar title = "Title" />
        </div> 
      </MuiThemeProvider>
    );
  }
}

export default App;

I cannot use material-ui components after update to material-ui@0.15.0-beta.1

3 Answers3

Linked