I'd like to add a new prop to the Tabs component, and I am unable to figure out how to do so without creating a wrapper component.
What I want:
import { Tab, Tabs } from '@mui/material';
const Component = () => (
<Tabs size="large"> // new size prop
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
)
// Theme object
import { createTheme } from '@mui/material/styles';
const theme = createTheme({
components: {
MuiTabs: {
styleOverrides: {
flexContainer: ({ ownerState }) => ({
'& > button': {
...(ownerState.size === 'medium' && {
fontSize: '12px',
}),
...(ownerState.size === 'large' && {
fontSize: '14px',
}),
},
}),
},
},
},
});
What I've tried that didn't work:
declare module '@mui/material/Tabs' {
interface TabsTypeMap {
props: {
size?: 'medium' | 'large';
}
}
}
The props object can't be merged: Subsequent property declarations must have the same type.
declare module '@mui/material/Tabs' {
interface CustomTabProps {
props: {
size?: 'medium' | 'large';
}
}
interface TabsTypeMap extends CustomTabProps {}
}
Just doesn't work, thought this would allow the props object to merge.
Working solutions that I prefer not to use:
import React from 'react'
import { styled } from '@mui/material';
import MuiTabs, { TabsProps as MuiTabsProps } from '@mui/material/Tabs';
interface TabsProps extends MuiTabsProps {
size?: 'medium' | 'large';
}
const Tabs = styled(MuiTabs)<TabsProps>();
Using a wrapper
import { Tab, Tabs } from '@mui/material';
const Component = () => (
{/* // @ts-ignore */}
<Tabs size="large">
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
)
Ignoring the prop error