如何使用React&做一个应用栏像这样的Material-UI? [英] How to make an app bar using React & Material-UI like this?

问题描述

如何制作如下所示的应用栏:

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>

输出结果如下:

我希望文字"显示在搜索栏下方的新行中.我该怎么办?

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

推荐答案

您是否尝试过添加样式flexDirection: 'column'?

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

只需替换您到那里的样式即可:

Just replace the style You got there:

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

到

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

这篇关于如何使用React&做一个应用栏像这样的Material-UI?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！