Add new props to component without making a wrapper component - TypeScript

Viewed 218

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

0 Answers
Related