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 道具的选项）然后玩 width/margins。我想你的里程可能会有所不同，具体取决于你在 ToolbarGroup.

中推的东西

Answer 2

如果有人像我一样在 2021 年或之后遇到此问题，material-ui 的 Toolbar 在后台使用 Flexbox，因此您只需应用自定义 class（或覆盖主题中的默认值）：

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

React material-ui：将工具栏上的项目居中

React material-ui: centering items on Toolbar

javascript

reactjs

material-ui