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.
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"
/>