在 Material-UI 选项卡中使用分隔线

Question

如果我想在 Material-UI 选项卡中使用分隔符或其他不是选项卡的东西，我会在控制台中收到 DOM 警告。

<Tabs ...>
  //...
  <Divider />
  //...
</Tabs>

解决此问题的方法是创建一个中间人类，如下所示：

<Tabs ...>
   //...
   <MDivider />
   //...
</Tabs>

function MDivider(props) {
  return <Divider />;
}

但我在想这是否是解决问题的最佳解决方案，或者是否有其他更好的方法来停止收到警告。

此处有错误的codesandbox此处
有修复的codesandbox

Answer 1

好的，所以我认为我根据 MUI 选项卡的使用方式找到了最佳修复方案。如果选项卡仅包含 MUI 选项卡子项，那么 MUI 的预期方法是添加分隔符，如下所示：

<Tab label="" icon={<Divider />} disabled />

，给它一个类名并相应地设置它的样式。Tab 组件是一个内部有东西的按钮，因此您需要覆盖 css 中的一些填充和最小高度。