html - 如何使用React＆Material-UI这样制作应用栏？

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

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

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

输出如下所示：

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

最佳答案

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

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

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

至

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

关于html - 如何使用React＆Material-UI这样制作应用栏？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40026643/