Steps to start with Material UI in React

Question

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 1

你必须用主题环绕你的按钮

首先包括主题和所有相关内容

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

然后在render()

中

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

这里要提到的重要一点是，主题可以包围单个元素。因此<div>被包括在内。

您应该做的另一件事是初始化索引文件中的injectTapEventPlugin()

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

默认情况下不包含injectTapEventPlugin，因此您必须通过npm安装它。

Answer 2

像这样：

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

另外，在渲染此组件的主js上，

injectTapEventPlugin()

在ReactDOM.render（）

之前