html - How to make an app bar using React & Material-UI like this?

Question

How do I make an app bar that looks like this:

I can create the top half of the app bar with the search box but I'm having trouble adding the bottom half. This is my code so far:

      <AppBar
        style={{backgroundColor: MuiTheme.palette.primary1Color, flexWrap: 'wrap'}}
        showMenuIconButton={false}
        title={explorerSearch}
        titleStyle={MuiTheme.title}
        iconClassNameRight='muidocs-icon-navigation-expand-more'
      >
        <Toolbar>
          <ToolbarGroup>
            {this._getContent()}
          </ToolbarGroup>
        </Toolbar>
      </AppBar>

This is what the output looks like:

I'd like the "TEXT" to show up in a new line below the search bar. How do I do that?

Answer 1

Have you tried adding to styles flexDirection: 'column'?

Just replace the style You got there:

style={{backgroundColor: MuiTheme.palette.primary1Color, flexWrap: 'wrap'}}

to

style={{backgroundColor: MuiTheme.palette.primary1Color, display: 'flex', flexDirection: 'column'}}