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

Question

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

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

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

Answer 2

看起来您的JSX代码中包含JS注释（ // ）。 那会让东西破裂。

如果要在JSX中注释掉某些内容，则必须使用大括号转入JS，然后使用多行注释（ /* comment */ ）-像这样：

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

Answer 3

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

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>

   ); 
}

Answer 4

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