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

假设，例如，我们有一个带有Toolbar的Appbar，其中有两个Button作为子项：

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

这段代码的结果是：

但是，如果我们移除Toolbar并将Button直接放在AppBar组件下：

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

结果将非常不同，如下所示，因为现在按钮是AppBar组件的直接后代，因此，它们将堆叠在彼此的顶部。

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

该AppBar用于构建您的文档。您将通常放置在标签中的内容放入内容中，例如页面标题和导航链接。如果您按 F12 检查您的页面，您会注意到 AppBar 创建了一个<header>标签。-> 所以 AppBar 是用来给你的页面一个放置介绍和导航内容的地方

您可以将工具栏可视化为现实生活中的工具带。在虚拟世界中，我们放置图标和按钮而不是工具。您还可以在工具栏中添加您的品牌名称，就像制造商在腰带上所做的那样。-> 工具栏是一个包装器，您可以在其中将元素放置在水平线上。

AppBar 可以在没有 Toolbar 的情况下使用，并且 Toolbar 不必放在 AppBar 内。如果您希望标题看起来像一个工具栏，那么这样做是有意义的<AppBar><Toolbar>...</Toolbar></AppBar>。如果您希望在页面中心有一个栏只是为了炫耀图标，那么没有 AppBar 的工具栏是有意义的。