Steps to start with Material UI in React

1
votes

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

2
node.jsreactjsmaterial-ui
Without using Material-ui the App works? As far as I know, you are missing the injectTapEventPlugin(); initialization. But even if this is not included you App should show up – el solo lobo
Yes without Material-ui my app is working. I am attaching a snapshot of my console. I think the problem is related to theme. I tried to solve it but nothing worked. – EdG
Did you try npm install material-ui --save ? – Roysh
please see the console logs in the browser. I think you need to add a material ui theme. – JFAP
@FranzPalngipang Yes I need to do that. But How should I do it. – EdG

2 Answers

1
votes

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()

1
votes

You have to surround your Button with a Theme

First include the Theme and all relevant stuff

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

And Then in your render()

         <MuiThemeProvider>
        <div>
            <TextField
                disabled={true}
                hintText="von"
                value={dateFromGer}
            /><br />
         <RaisedButton
                    label="Senden"
                    primary={true}
                    onClick={}
                />
      </div>
    </MuiThemeProvider>

The Important thing to mention here is, that the Theme can just surround a Single Element. therefore the <div> was included.

Another thing you should do is to initalize the injectTapEventPlugin() in your index file 

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

And the injectTapEventPlugin is not included by default, therefore you have to install it via npm.