React material-ui：在工具栏上居中项目答案

【问题标题】：React material-ui: centering items on ToolbarReact material-ui：在工具栏上居中项目
【发布时间】：2016-03-01 19:51:32
【问题描述】：

我正在尝试在包含三个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 docs，centered={true} 似乎没有一些简单的设置-- 我该如何做到这一点？

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

【问题讨论】：

你应该能够为中间添加一个 { margin: auto, width: (不管它需要是什么) } 作为样式道具来居中
AHA - 我确实需要设置宽度，但我还必须将float: none 设置为内联样式。谢谢！

标签： javascript reactjs material-ui

【解决方案1】：

如果有人像我一样在 2021 年或之后遇到这种情况，material-ui 的 Toolbar 在后台使用 Flexbox，因此您所要做的就是应用自定义类（或覆盖主题中的默认类）：

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

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

【讨论】：

【解决方案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（不是通过 material-ui 道具的选项），然后使用宽度/边距。我想你的里程可能会有所不同，具体取决于你在ToolbarGroup 内推的东西。

【讨论】：

【解决方案3】：

在新版本的 Material UI 中，您可以只使用 sx 属性：

https://mui.com/system/the-sx-prop/#main-content

<Toolbar sx={{ justifyContent: "space-between" }}> // or "center" for a single element
...
</Toolbar>

【讨论】：