在Material-UI标签中使用分隔线

Question

如果我要使用Divider或Material-UI选项卡中不是Tab的其他功能，则会在控制台中收到DOM警告。

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

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

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

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

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

代码沙箱，错误为here
修正为here的codesandbox

Answer 1

好，所以我认为我是根据MUI标签的使用方式找到最佳解决方案的。如果Tabs仅用于在其中包含MUI Tab子级，则MUI预期的方法是添加Divider，如下所示：

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

，为其指定一个className并相应设置其样式。 Tab组件是一个内部装有按钮的按钮，因此您需要覆盖CSS中的某些填充和最小高度。

Answer 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>