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

Question

If I want to use a Divider or something else that isn't a Tab inside Material-UI Tabs, I get DOM warnings in the console.

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

A workaround for this is to create a middleman-kind class like this:

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

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

But I was thinking if this is the best solution to solve the issue or if there are other, better ways to stop getting the warning.

codesandbox with error here
codesandbox with fix here

Answer 1

Ok, so I think I found the best fix based on how the MUI Tabs are meant to be used. If Tabs are only meant to have MUI Tab children inside, then the MUI-intended way to do this would be to add the Divider like this:

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

, give it a className and style it accordingly. The Tab component is a button with stuff inside, so you would need to override some paddings and min-heights in css.

Answer 2

Using CSS to add a border to the top of the tab seems to work well for me.

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

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

Answer 3

Just for anyone wondering why the divider doesn´t show up, add the orientation property and set it to "vertical" so the divider can be visible in horizontal Tabs.

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

Answer 4

you can use the Dividers in between each Tab as follows:

        <Box
          style={{
            display: "flex",
            justifyContent: "flex-end",
            marginRight: 20,
          }}
        >
          <Tabs
            sx={{ backgroundColor: "#EAEBEF", borderRadius: 4 }}
            value={tab}
            onChange={(e, v) => setTab(v)}
          >
            <Tab label="Item One" />
            <Divider
              orientation="vertical"
              style={{ height: 30, alignSelf: "center" }}
            />
            <Tab label="Item Two" />
            <Divider
              orientation="vertical"
              style={{ height: 30, alignSelf: "center" }}
            />
            <Tab label="Item Three" />
          </Tabs>
        </Box>