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没有浮动（不是通过材料-ui道具的选项），然后使用宽度/边距。我想你的里程可能会因你在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/）

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

2 个答案: