Css 材质UI按钮和按钮组在基线上不对齐

有人能解释一下为什么在下面的例子中Button和ButtonGroup不在基线上对齐吗？ButtonGroup元素上是否有可以更改的属性以使它们对齐

我的页面 常数{ 网格 按钮 按钮组 }=材料； 功能应用程序{ 回来 取消 提交 ; } ReactDOM.render , document.querySelector'root'， ; 如果要将它们与基线对齐，可以使用block而不是inline flex覆盖显示css。您可以使用上的组件道具来完成此操作

---

您可以使用align items CSS属性的最后一个基线选项。不幸的是，MUI系统不支持它，因此您需要为此使用类或内联样式：。例如，这适用于我在这里发布的示例，就像alignItems=center一样。但在我的真实场景中，它打破了网格中其他元素的基线对齐：而且，它并没有解释这种不对齐是从哪里来的。我看到了你的另一个问题。我认为这与material ui无关，而是一个纯粹的CSS问题，如果您将消除material/react内容的所有噪音，并使用react/material代码的输出打开一个纯粹的html CSS问题，您将快速回答为什么会发生这种情况：-如果我尝试在纯html/CSS中实现此布局，我确信我不会有这个问题：根本原因肯定是在材质UI CSS中的某个地方。我问这些问题是因为我想学习如何正确地使用Material UI，正如作者所希望的那样。@Dekel有趣的是，我刚刚找到了一种方法来对齐其他问题中的所有元素！这也包含了一个相当愚蠢的解决方案：只需将第一个包在一个虚拟包中。。。但这并不能解释错位的原因。谢谢，这确实有效！但我正在努力理解它。为什么有必要？ButtonGroup的元素与Cancel元素一样具有display:inline flex，那么是什么导致了不对齐呢？欢迎使用：非常确定inline flex属性用于对多个按钮进行分组，以允许它们在显示inline时进行调整。如果你没有使用多个按钮，我看不出使用多个按钮的理由。是的，但在现实世界中，我确实在一个按钮组中使用了多个按钮。问题是，如果在同一网格行中有一个独立按钮和一个按钮组，它们不会对齐，除非我在一个虚拟按钮组中应用修复或包装独立按钮。

<ButtonGroup component={Box} display="block !important">