CODEWITHSUNDEEP
meteorreactjsmaterial-ui
Almaju
Almaju

Reputation: 1383

React Material-UI : stacked appbar

Strange behaviour, when I try to make an appbar with this code:

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>

        );
    }
}

The result gives me a stacked appbar:

enter image description here

I have absolutly no idea why it does that and did not find any similar issue. I am running on a fresh Meteor instance with React and Material-UI installed via meteor npm install material-ui

EDIT: After investigation, it seems the problem is that the appbar does not have display:flex. Yet, it is impossible to add it manually with style={{display:'flex'}} (nothing changes).

Upvotes: 2

Views: 2621

Answers (2)

Zachiah
Zachiah

Reputation: 2627

I know this is old, but in case anyone sees this, the way to do this is to nest a <Toolbar /> inside the <AppBar />.

<AppBar /> docs

Upvotes: 3

Almaju
Almaju

Reputation: 1383

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

And in main.css:

.appBar{
    display:flex;
}

Weird behaviour though.

Upvotes: 1

Related Questions