Reagieren Material UI: gestapelt appbar

Question

Seltsames Verhalten, wenn ich versuche, einen appbar mit diesem Code zu machen:

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> 

     ); 
    } 
} 

Das Ergebnis gibt mir eine gestapelte appbar:

Ich habe absolut keine Ahnung, warum es das tut und kein ähnliches Problem gefunden hat. Ich bin auf einer frischen Meteor-Instanz laufe mit Reagieren und Material-UI installiert über meteor npm install material-ui

EDIT: Nach einer Untersuchung, es scheint, das Problem ist, dass die appbar nicht display:flex hat. Es ist jedoch unmöglich, es manuell mit style={{display:'flex'}} hinzuzufügen (nichts ändert sich).

Answer 1

Ein quick and dirty fix: <AppBar title="Title" className="appBar" />

Und in main.css:

.appBar{ 
    display:flex; 
} 

Sonderbare obwohl Verhalten.