材质ui应用栏未显示-reactjs答案

【问题标题】：material ui app bar not showing - reactjs材质ui应用栏未显示-reactjs
【发布时间】：2019-09-06 08:24:12
【问题描述】：

最近我将我的材料 ui 更新为最新版本，并在 react js 中更新了我的库。

这是示例代码：

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
class HomePage extends React.Component {
    render() {
        return (

            <div>
                <div>

                    <MuiThemeProvider>
                        <div align="center">

                            <AppBar
                                title="Home Page"
                            />
                        </div>
                    </MuiThemeProvider>
                </div >
                <button id="login_button" type="button" class="btn btn-primary btn-block ml0 mr0 mt32">Login</button>
}

在这里，正常的登录按钮被加载。但 Appbar 并没有在它上面加载。它在旧的材料 ui 库中工作。但它在新的失败。我不知道我在其中缺少什么。我检查了material-ui site 两次以上，并更新了所有库，但无法修复它。帮我解决一些问题

【问题讨论】：

标签： reactjs material-design material-ui

【解决方案1】：

根据AppBar docs，它不使用title prop。
此外，您必须提供子项（这将是 AppBar 的内容）。
你看不到任何东西，因为你没有为 AppBar 提供孩子

class HomePage extends React.Component {
  render(){
    return (
      <MuiThemeProvider>
        <div align="center">
          <AppBar>
            <div>Home Page</div>
          </AppBar>
        </div>
      </MuiThemeProvider>
    );
  }
}

你可以参考这个CodeSandbox例子

【讨论】：