材质 UI 组件在 React 中不起作用答案

【问题标题】：Material UI components not working in React材质 UI 组件在 React 中不起作用
【发布时间】：2017-02-16 11:30:03
【问题描述】：

我有以下代码 sn-p，它在浏览器窗口中根本不显示任何内容。你能告诉我为什么吗？

render(){ 
    return (
        <div>
            //Rama
            //console.log('In Render'),  
            <div>
                enter code here    
                <div>
                    <TextField    
                        hintText="Username"     
                    />
                    <br/>    
                    <TextField  
                        hintText="Password"    
                    />
                    <br/>

                    <RaisedButton label="Login" primary={true}  />  
                </div>
            <div>
            <TextField>Login Successful</TextField> 
            </div>
        </div>
    )  
}

pastebin 完整组件链接：http://pastebin.com/etjUwvWT

【问题讨论】：

你在导入TextField，RaisedButton，你看到什么错误..，分享整个代码而不是仅仅渲染函数。
控制台没有错误。
整个代码....import React, { Component, PropTypes } from 'react';从 'meteor/react-meteor-data' 导入 { createContainer }；从 'react-dom' 导入 ReactDOM；从“material-ui/AutoComplete”导入 AutoComplete；
我可以使用 Pastebin
用完整的代码更新ques :) 你在ques中粘贴的sn-p，有一个div不匹配，如果你使用相同的，它应该通过错误。

标签： reactjs material-ui

【解决方案1】：

要渲染material-ui 组件，您需要将它们包装在MuiThemeProvider 中。

根据DOC:

从 v0.15.0 开始，Material-UI 组件需要一个主题假如。启动和运行的最快方法是使用 MuiThemeProvider 将主题注入您的应用程序上下文。

如何使用这些组件？

先用这一行导入MuiThemeProvider：

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

使用这个渲染方法：

render(){  
    return (
        <MuiThemeProvider muiTheme={getMuiTheme()}>
            <div>
                <div>
                    <TextField
                        hintText="Username"
                    />
                    <br/>
                    <TextField
                        hintText="Password"
                    />
                    <br/>
                    <RaisedButton label="Login" primary={true}  />
                </div>
                <div>
                    <TextField/>
                </div> 
            </div>
        </MuiThemeProvider>
    );
}

如果您在整个项目中使用 material-ui 组件，则无需在每个页面上使用MuiThemeProvider，您还可以在全局范围内包含它。将此包含在您的路由器中或将此行放在应用程序的主页上。

还有一件事你只导入了injectTapEventPlugin，你还需要初始化它。导入后将这一行放在这个组件中：

injectTapEventPlugin();

【讨论】：

【解决方案2】：

看起来您的 JSX 代码中有 JS-cmets (//)。那会让东西坏掉。

如果你想在 JSX 中注释掉一些东西，你必须用大括号转义到 JS 中，然后使用多行 cmets (/* comment */) - 像这样：

render() {
  return (
    <div>
      {/* <button>Commented out button</button>*/}
    </div>
  );
}

【讨论】：

从渲染中移除所有 cmets，同时确保你已经将它们全部包裹在 MuiThemeProvider -> 确保你遵循 Material-UI 教程

【解决方案3】：

从TextField 标记之间删除文本。还将您的代码包装在 MuiThemeProvider 之间的渲染方法中。这对我有用。

render(){
  return (
      <MuiThemeProvider>
        <div>
            <div>
              <TextField
                hintText="Username"
              /><br/>
              <TextField
                hintText="Password"
              /><br/>

              <RaisedButton label="Login" primary={true}  />
            </div>

            <div> 
              <TextField></TextField>
            </div>
        </div>
      </MuiThemeProvider>

   ); 
}

【讨论】：

我很高兴能帮上忙。你能把我的答案标记为绿色吗？

【解决方案4】：

作为一个仅供参考，所以这不是最明显的响应，但以防万一这是您的情况，我的问题是我已将 Windows 10 个性化设置更改为使用对比度，而我的 React 应用程序中的蓝条消失了！经过一段时间的搜索，我关闭了它，我的酒吧又回来了。

【讨论】：