Material-ui: Required context `muiTheme` was not specified in `RaisedButton`.

[TrustDec]

Warning: Failed context type: Required context muiTheme was not specified in RaisedButton.
in RaisedButton (created by MyAwesomeReactComponent)
in MyAwesomeReactComponentprintWarning @ index.js:9457warning @
Uncaught TypeError: Cannot read property 'prepareStyles' of undefined(…)

App.js
import React from 'react'; import ReactDOM from 'react-dom'; import RaisedButton from 'material-ui/RaisedButton'; let MyAwesomeReactComponent = () => ( <RaisedButton label="Default" /> ); export default MyAwesomeReactComponent;
main.js
import React from 'react'; import ReactDOM from 'react-dom'; import MyAwesomeReactComponent from './App.js'; ReactDOM.render(<MyAwesomeReactComponent />, document.getElementById('app'))

Material-UI: 0.16.0
React: 15.0.1

[davincho]

As explained in http://www.material-ui.com/#/get-started/usage you have to wrap your app with <MuiThemeProvider>.

[nickhallph]

In my case, my app was wrapped in < MuiThemeProvider />, and that wasn't the reason I was receiving the error:

Warning: Failed context type: The contextmuiThemeis marked as required inDrawer, but its value isundefined.

My solution:

My Sidebar component that was rendering a Drawer component is a dumb component, and in my test, I was trying to mount the Sidebar, I changed it from mount to a shallow and my test passed with no errors.

Before:

import React from 'react';
import { mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import Sidebar from './sidebar';

describe('<Sidebar /> component', () => {
  const wrapper = mount(<Sidebar />);

  it('should render', () => {
    const tree = toJson(wrapper);
    expect(tree).toMatchSnapshot();
  });

  it('should render Sidebar Nav Items', () => {
    expect(wrapper.find('.nav-item')).toHaveLength(2);
  });
});

After:

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import Sidebar from './sidebar';

describe('<Sidebar /> component', () => {
  const wrapper = shallow(<Sidebar />);

  it('should render', () => {
    const tree = toJson(wrapper);
    expect(tree).toMatchSnapshot();
  });

  it('should render Sidebar Nav Items', () => {
    expect(wrapper.find('.nav-item')).toHaveLength(2);
  });
});

[kenjiru]

I was getting this error when testing with Jest, but I had a slightly different scenario.

In my component file I was exporting:

class RaisedContainer extends Component {}
export default muiThemeable()(RaisedContainer);

And then in the test file, I had a simple snapshot tests:

it("should render correctly", () => {
    const output = shallow(
        <RaisedContainer
            className="custom-class"
            checked={false}/>
    );
    expect(shallowToJson(output)).toMatchSnapshot();
});

The test was passing, with the following warning:

  console.error node_modules/fbjs/lib/warning.js:35
    Warning: Failed context type: The context `muiTheme` is marked as required in `MuiComponent`, but its value is `undefined`.
        in MuiComponent

Wrapping the component in test with MuiThemeProvider solves the problem. But I don't want to wrap all my tests like this.

So the solution was to also export the component unwrapping in muiThemeable.

[senthilaru]

Do import without the curly braces like below.
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

[axwack]

I upgraded to the 1.0.0 beta..this still does not work for me on RaisedButton.
Warning: Failed context type: The contextmuiThemeis marked as required inRaisedButton, but its value isundefined.

Uncaught TypeError: Cannot read property 'prepareStyles' of undefined

Anythoughts?

[oliviertassinari]

@axwack The RaisedButton component do no longer exist on v1: <Button variant="raised" />.

[axwack]

Thanks @oliviertassinari. I tried that and then stopped because I wasn’t sure. Is the material ui api docs up to date and all the properties specified in the doc are all the properties? For example style was not in there but I read that you should assume that things like onclick will be on there even though not documented.

[oliviertassinari]

@axwack The v1 API follow these rules: https://material-ui-next.com/guides/api/