我正在查看每个组件产生的默认CSS属性。 工具栏 的主要目的是通过内联显示（子元素彼此相邻）显示其子项，而 Appbar 则不行。所述
AppBar 部件用途 显示：柔性 和 弯曲方向：柱 ，该装置直接后代被堆叠在彼此的顶部。另一方面， 工具栏也 使用
display：flex ，但未设置 flex-direction ，这意味着它使用其默认值： row 。就是说， Button
组件使用 display：inline-block 。这就是为什么在 工具栏 组件内将元素彼此相邻放置的原因。

让说，例如，我们有一个 Appbar 与 工具栏 有两个 按钮 S作为孩子：

<AppBar>
    <Toolbar>
        <Button variant="outlined" color="inherit" >
            Button 1
        </Button>
        <Button variant="outlined" color="inherit">
            Button 2
        </Button>
    </Toolbar>
</AppBar>

此代码的结果显示 在此处

但是，如果我们删除 工具栏 并将 Button 放置在 AppBar 组件的正下方：

<AppBar>
    <Button variant="outlined" color="inherit" >
        Button 1
    </Button>
    <Button variant="outlined" color="inherit">
        Button 2
    </Button>
</AppBar>

其结果将是非常不同的（示出在这里），因为现在的按钮是直接后代的
AppBar 部件等，它们会在彼此的顶部堆叠。

如您所见， AppBar 和 Toolbar 具有不同的用途。这就是为什么我认为 工具栏 永远不会消失的原因。