我正在查看每个组件产生的默认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 具有不同的用途。这就是为什么我认为 工具栏 永远不会消失的原因。
