React Material-ui：使工具栏上的项目居中

Question

我正在尝试在页面上实现一个工具栏，其中包含三个ToolbarGroup组件：

            <Toolbar>
                <ToolbarGroup firstChild={true} float="left">
                    {prevButton}
                </ToolbarGroup>

                <ToolbarGroup>
                    {releaseBtn}
                </ToolbarGroup>

                <ToolbarGroup lastChild={true} float="right">
                    {nextButton}
                </ToolbarGroup>
            </Toolbar>

一般的想法是prevButton应该一直渲染到工具栏的左侧（确实如此），nextButton应该一直渲染到右侧（确实如此）......并且releaseBtn应该以工具栏为中心（当前没有发生）。

根据material-ui文档，似乎没有一些简单的设置centered={true}——我怎样才能做到这一点？

我尝试过手动将中间的样式设置ToolbarGroup为margin: 0px auto，但这似乎没有帮助。

Answer 1

如果有人像我一样在 2021 年或以后遇到这个问题，material-ui 在Toolbar底层使用 Flexbox，所以你所要做的就是应用一个自定义类（或覆盖主题中的默认类）：

.myToolbar {
  justify-content: space-between;
}

space-between将沿主水平轴分布子项： （图片来自https://css-tricks.com/snippets/css/a-guide-to-flexbox/）

Answer 2

我的最终解决方案是这样做：

            <Toolbar>
                <ToolbarGroup firstChild={true} float="left">
                    {prevButton}
                </ToolbarGroup>

                <ToolbarGroup style={{ 
                    float       : 'none', 
                    width       : '200px',
                    marginLeft  : 'auto',
                    marginRight : 'auto'
                }}>
                    {releaseBtn}
                </ToolbarGroup>

                <ToolbarGroup lastChild={true} float="right">
                    {nextButton}
                </ToolbarGroup>
            </Toolbar>

我首先必须设置中间ToolbarGroup没有浮动（不是通过材质 UI 道具的选项），然后调整宽度/边距。我想你的里程可能会根据你在里面塞什么而有所不同ToolbarGroup。