MUI中Box组件的Flex布局在Toolbar内无法生效的问题

嘿，我之前也踩过这个坑！咱们来唠唠问题出在哪，以及怎么快速修复：

问题根源 #

MUI的Toolbar组件默认就是一个flex容器（自带display: flex样式），但它的子元素默认不会自动占满整个可用宽度。你那个设置了justify-content: "space-between"的Box，默认宽度只够包裹里面的图标按钮，左右元素自然不会被推到两端——看起来就像flex布局没生效一样。而当你去掉Toolbar时，Box直接作为AppBar的子元素，AppBar的样式让它能撑满整个宽度，所以space-between就正常起作用了。

修复方案 #

只需要给外层的Box加上flex: 1，让它占满Toolbar的全部可用宽度就行。这样Box作为flex容器，里面的元素就能通过justify-content: space-between实现两端对齐了。

修改后的代码如下：

<AppBar
  sx={{
    width: { sm: `calc(100% - ${drawerWidth}px)` },
    ml: { sm: `${drawerWidth}px` },
  }}
  position="fixed"
>
  <Toolbar>
    {/* 新增flex:1，让Box撑满Toolbar的宽度 */}
    <Box sx={{ display: "flex", justifyContent: "space-between", flex: 1 }}>
      <Box>
        <IconButton>
          <MenuIcon />
        </IconButton>
      </Box>
      <Box>
        <IconButton>
          <MailIcon />
        </IconButton>
        <IconButton>
          <InboxIcon />
        </IconButton>
      </Box>
    </Box>
  </Toolbar>
</AppBar>

你试试这个写法，应该就能看到左右图标按钮分别对齐Toolbar的两端啦～

备注：内容来源于stack exchange，提问作者Khaled Developer