user3761761 user3761761 - 3 months ago 21
Node.js Question

Steps to start with Material UI in React

I am trying to work with material-ui in React but I don't know how to get it working. I followed the documentation and did following:


  1. npm install material-ui

  2. npm install

  3. Then in my App.js I inserted "import injectTapEventPlugin from 'react-tap-event-plugin';"

  4. Then "import RaisedButton from "material-ui/RaisedButton";"



My App.js has RaisedButton like this

<RaisedButton label="Default" />


But when I run it, nothing shows up in browser.

import React from 'react'
require('../../scss/style.scss');
import Userlist from "../Containers/user-list"
import UserDetail from '../Containers/user-detail'
import injectTapEventPlugin from 'react-tap-event-plugin';
import RaisedButton from 'material-ui/RaisedButton';
const App =() =>(

<div>
<RaisedButton label="Default" />
<h2>
Username list
</h2>
<Userlist/>
<hr/>
<h2>
User Detail
</h2>
<hr/>
<UserDetail/>

</div>
);


Console

Answer

Like this:

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';

const App =() =>(
    <MuiThemeProvider>
        <div>
            <RaisedButton label="Default" />
            <h2>
                Username list
            </h2>
            <Userlist/>
            <hr/>
            <h2>
                User Detail
            </h2>
            <hr/>
            <UserDetail/>
        </div>
    </MuiThemeProvider>
);

also, on your main js where you render this component,

injectTapEventPlugin()

before ReactDOM.render()

Comments