how to properly add material-ui to a project?

Question

I try to add material-ui to my React project.

after running npm install material-ui -S I try to include an example from the documentation.

      <div>
        <RaisedButton onClick={this.handleTouchTap} label="Click me" />

        <Popover
          open={open}
          anchorEl={anchorEl}
          anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
          targetOrigin={{ horizontal: 'left', vertical: 'top' }}
          onRequestClose={this.handleRequestClose}
        >
          <Menu>
            <MenuItem primaryText="Refresh" />
            <MenuItem primaryText="Help &amp; feedback" />
            <MenuItem primaryText="Settings" />
            <MenuItem primaryText="Sign out" />
          </Menu>
        </Popover>
      </div>

I import desired material-ui component in the following way import { RaisedButton, Popover, Menu, MenuItem } from 'material-ui';

and this leads to an error with following stack trace.

Looks odd, I see the example in a different way. Look at this link for the raise button example material-ui-next.com/demos/buttons/#flat-buttons it has a different implementation. — Vikram Palakurthi
– Vikram Palakurthi, Commented Oct 26, 2017 at 20:38

BravoZulu · Accepted Answer · 2017-10-26 20:41:39Z

1

Did you follow the usage in their docs?

You need to include a import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; at the top of your app.

answered Oct 26, 2017 at 20:41

BravoZulu

1,14013 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SuperManEver Over a year ago

no, I did not. didn't know about that. need to try this out

groenhen · Accepted Answer · 2018-02-25 22:59:06Z

1

I also have this same problem. I hope I can add to the answer submitted by BravoZulu.

You need to wrap your material-ui code source snippet with an element tag of <MuiThemeProvider> (like for example below):

<MuiThemeProvider>

    ...code source from material-ui 

</MuiThemeProvider>

Hope this helps someone else in the future. :)

edited Feb 25, 2018 at 22:59

groenhen

3,02725 gold badges51 silver badges69 bronze badges

answered Feb 25, 2018 at 16:00

Gel

3,0662 gold badges20 silver badges25 bronze badges

Collectives™ on Stack Overflow

how to properly add material-ui to a project?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related