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

【问题标题】：Using Dividers inside Material-UI Tabs在 Material-UI 选项卡中使用分隔线
【发布时间】：2020-06-16 23:39:52
【问题描述】：

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

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

解决方法是创建一个像这样的中间人类：

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

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

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

代码沙盒错误here
修复here的代码沙盒@

【问题讨论】：

【解决方案1】：

好的，所以我认为我根据 MUI 选项卡的使用方式找到了最佳解决方案。如果 Tabs 只是为了在里面包含 MUI Tab 子项，那么 MUI 的预期方法是添加 Divider，如下所示：

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

，给它一个类名并相应地设置它的样式。 Tab 组件是一个里面有东西的按钮，所以你需要在 css 中覆盖一些填充和最小高度。

【讨论】：

【解决方案2】：

使用 CSS 为选项卡顶部添加边框似乎对我来说效果很好。

const useStyles = (theme) => ({
    withDivider: {
        borderTop: `1px solid ${theme.palette.divider}`,
    },
});

<Tabs>
    <Tab>...<Tab/>
    <Tab>...<Tab/>
    <Tab className={classes.withDivider}>...<Tab/>
    <Tab>...<Tab/>
</Tabs>

【讨论】：