在 React 中以 Material UI 开始的步骤

Question

我正在尝试在 React 中使用 material-ui，但我不知道如何让它工作。我按照文档进行了以下操作：

npm 安装material-ui
npm 安装
然后在我的 App.js 中插入 "import injectTapEventPlugin from 'react-tap-event-plugin';"
然后"import RaisedButton from "material-ui/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>
);

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

之前

在 React 中以 Material UI 开始的步骤

Steps to start with Material UI in React

node.js

reactjs

material-ui