如何使用React＆amp; amp制作应用栏Material-UI是这样的吗？

Question

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

我可以使用搜索框创建应用栏的上半部分但是我无法添加下半部分。到目前为止，这是我的代码：

      <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>

这是输出的样子：

我希望“TEXT”显示在搜索栏下方的新行中。我该怎么做？

Answer 1

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

只需替换你在那里的风格：

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

到

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