React Material-UI：堆叠的appbar

Question

奇怪的行为，当我尝试使用此代码制作appbar时：

import React, { Component } from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';

// Needed for onTouchTap
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

export default class App extends Component {
    render() {
        return (
            <MuiThemeProvider muiTheme={getMuiTheme()}>
                <div>
                    <AppBar title="Title"/>
                </div>
            </MuiThemeProvider>

        );
    }
}

结果给了我一个堆叠的appbar：

我绝对不知道为什么会那样做，也没有找到任何类似的问题。我正在通过meteor npm install material-ui

安装React和Material-UI的新Meteor实例上运行

编辑：经过调查，问题似乎是appbar没有display:flex。然而，不可能用style={{display:'flex'}}手动添加它（没有任何变化）。

Answer 1

我知道这是旧的，但万一有人看到这个，这样做的方法是在 <Toolbar /> 中嵌套一个 <AppBar />。

<AppBar /> docs

Answer 2

一个快速而又脏的修复：<AppBar title="Title" className="appBar" />

在main.css中：

.appBar{
    display:flex;
}

虽然有奇怪的行为。