CODEWITHSUNDEEP
material-uinext.js
Diego Franco
Diego Franco

Reputation: 73

Material ui tab not working with nextjs Link

The link component is from nextjs and wraps the tab component. Without the link component tabs works fine.

<Tabs
              value={value}
              onChange={handleChange}
              sx={{
                marginLeft: "auto",
                marginRight: "auto",
              }}
              centered
              textColor='primary'
              indicatorColor='primary'>
              {routes.map((route, index) => (
                <Link key={index} href={route.url} passHref>
                  <StyledTab label={route.name} />
                </Link>
              ))}
            </Tabs>

Upvotes: 0

Views: 1445

Answers (2)

Luigi Raynel
Luigi Raynel

Reputation: 21

To use the link component in the Material UI Tab you need to pass your NextJS Link component to the LinkComponent props.

Look this:

interface TabBarProps {
  page?: ''|'info';
}

interface LinkTabProps {
  label?: string;
  href?: string;
  value?: string;
}

function LinkTab(props: LinkTabProps) {
  return (
    <Tab
      LinkComponent={Link}
      {...props}
    />
  );
}

export default function TabBar({page}: TabBarProps) {
  return (
    <Tabs value={page}>
      <LinkTab label="Products" value="" href="/" />
      <LinkTab label="Informations" value="info" href="/info" />
    </Tabs>
  )
}

or just do this in your Tab component:

<Tab label="Products" value="" href="/" LinkComponent={Link}/>

Upvotes: 2

Diego Franco
Diego Franco

Reputation: 73

Found the answer. An adapter is needed. https://github.com/mui-org/material-ui/tree/HEAD/examples/nextjs-with-typescript

Upvotes: 0

Related Questions