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 docs似乎没有一些简单的设置为centered={true} - 我怎样才能做到这一点？

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

Answer 1

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

            <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内推入的内容而ToolbarGroup 。

Answer 2

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

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

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

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