Material UI Raised Button not working

Question

I'm literally copying the code verbatim from Material UI (http://www.material-ui.com/#/components/raised-button) for the raised button. I've installed all the necessary node modules. What is happening?

Attached the error below image. Basically it says "TypeError: Cannot read property 'prepareStyles' of undefined".

<RaisedButton label="Primary" primary={true} style={style} />

Answer 1

You need to wrap your topmost component (or at least some parent component) in material-ui's MuiThemeProvider component:

https://jsfiddle.net/9017dsc2/1/

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

class Example extends React.Component {
  render() {
    return (
      <div>
        <RaisedButton label="A Raised Button" />
      </div>
    );
  }
}

const App = () => (
  <MuiThemeProvider>
    <Example />
  </MuiThemeProvider>
);

Answer 2

Looks like your style attribute is undefined. Please have a look at code of document page:

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

const style = {
  margin: 12,
};

const RaisedButtonExampleSimple = () => (
  <div>
    <RaisedButton label="Default" style={style} />
    <RaisedButton label="Primary" primary={true} style={style} />
    <RaisedButton label="Secondary" secondary={true} style={style} />
    <RaisedButton label="Disabled" disabled={true} style={style} />
    <br />
    <br />
    <RaisedButton label="Full width" fullWidth={true} />
  </div>
);

export default RaisedButtonExampleSimple;

There is a constant style:

const style = {
  margin: 12,
};

Answer 3

This question should be closed and or downvoted as it has already been asked and answered here: Getting Uncaught TypeError: Cannot read property 'prepareStyles' of undefined while trying to open a Dialog

I don't have the rep required to handle this but we shouldn't have multiple questions on here to the same thing.