所有material ui示例都显示了Appbar中的工具栏.为什么不只是Appbar？这两者有什么区别？
https://material.io/design/components/没有工具栏组件，只有"应用程序栏:顶部".
https://material.io/develop/web/components/toolbar/表示"现有的MDCToolbar组件和样式将在future 的版本中删除"
那么，material ui工具栏最终会消失吗？
推荐答案
我正在查看每个组件生成的默认CSS属性.Toolbar的主要用途是通过内联显示(元素彼此相邻放置)来显示其子元素，而Appbar没有这样做.AppBar组件使用display: flex和flex-direction: column，这意味着直接子体彼此堆叠.另一方面，Toolbar也使用display: flex，但没有设置flex-direction，这意味着它使用默认值:row.也就是说，Button组件使用display: inline-block.这就是为什么元素在Toolbar个组件中彼此相邻放置的原因.
比如说，我们有一个Appbar和一个Toolbar，还有两个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永远不会消失.
Reactjs相关问答推荐
构建next.js项目时状态不变，但在dev服务器中
在Reaction中测试条件组件
react 副作用循环
关于同一位置的不同组件实例的react S规则被视为相同组件
如何使用皮金贴图在Reactjs中制作 map 上的点之间的线的动画？
使用`Link`包装`tr`标记会在Next.js中产生水合错误14
子路径上未定义useMatches句柄
如何使ionic 面包屑在州政府条件下可点击？
为什么在页面重新加载时Location.State变得未定义？
从 MongoDB createAt 字段中分割精确时间
无法从子组件传递数据到父组件
try 从 React JS 构建此教程游戏但无法继续前进
损坏的图像 React useState
ReactJS：在导航栏中使用 Select inside Link 组件时如何避免重定向？
为什么刷新页面时我的localStorage PET值变成空字符串？
如何通过 React JS 中的映射将新元素添加到对象数据数组中
如何制作基于对象 struct 呈现数据的可重用组件？
如何使用 UseState 正确测试组件
从输入中获取数字时，react 计数器不会增加
我可以在类组件中使用 useState 挂钩吗？
实用课程推荐