React router link messes up MUI tab component styling

January 25, 2023

I’m having certain styling for the <Tab> component from MUI and currently I’m wrapping this tab with a <Link> from react-router-dom. The <Tab> has some styling which handles the active tab etc. but the Link messes this up.

What is the cleanest way to make sure the <Link> styling gets removed and it displays the <Tab> styling instead?

Code is as follow:

<Link to='/app/listings'>
   <Tab value="one" icon={<FormatListBulletedIcon />} label="Challenges" iconPosition='start' />
</Link>`

edit:

The <Tab> is styled in my MUI Theme as followed:

components: {
        MuiTab: {
            styleOverrides: {
                root: {
                    minHeight:24,
                    fontSize: 12,
                    padding: '6px 10px',
                    justifyContent: 'flex-start'
                },
            },
        },
   },

The <Link tag wrapping it overwrites this.

Simple example: https://codesandbox.io/s/confident-framework-u01mdk?file=/src/App.js

Remove the Link tag and styling changes.

>Solution :

You can render the Tab component as a Link.

Instead of

<Link color="inherit" to="/app/listings">
  <Tab
    value="one"
    icon={<FormatListBulletedIcon />}
    label="Challenges"
    iconPosition="start"
  />
</Link>

use the Tab component’s component prop to really render the Link component and pass all the link props to the Tab.

<Tab
  component={Link}
  color="inherit"
  to="/app/listings"
  value="one"
  icon={<FormatListBulletedIcon />}
  label="Challenges"
  iconPosition="start"
/>