Using Dividers inside Material-UI Tabs

user_7238376 0
Viewed 2182

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

material-ui reactjs javascript
4 Answers

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.

user_72383760

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

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 />
user_190340730

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>
user_42657010
Related