从React中的Material UI开始的步骤

我正尝试在React中使用material-ui，但是我不知道如何让它工作。 我遵循了文档，并做了如下：

1. npm安装材料 – 用户界面
2. npm安装
3. 然后在我的App.js中插入“从react-tap-event-plugin”导入injectTapEventPlugin;
4. 然后“从”material-ui / RaisedButton“导入RaisedButton;

我的App.js像这样RaisedButton

<RaisedButton label="Default" /> 

但是当我运行它时，什么也没有显示在浏览器中。

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

安慰

Answer 1

喜欢这个：

 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（）之前

Answer 2

你必须围绕你的button与主题

首先包括主题和所有相关的东西

 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安装它。