reactjs - Legg til nye props til komponent uten å lage en wrapper-komponent - TypeScript

Jeg vil gjerne legge til en ny prop til Tabs-komponenten, og jeg klarer ikke å finne ut hvordan jeg skal gjøre det uten å lage en wrapper-komponent.

Hva jeg ønsker:

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',
            }),
          },
        }),
      },
    },
  },
});

Hva jeg har prøvd som ikke fungerte:

declare module '@mui/material/Tabs' {
  interface TabsTypeMap {
    props: {
      size?: 'medium' | 'large';
    }
  }
}

Props-objektet kan ikke slås sammen: Påfølgende egenskapsdeklarasjoner må ha samme type.

declare module '@mui/material/Tabs' {
  interface CustomTabProps {
    props: {
      size?: 'medium' | 'large';
    }
  }

  interface TabsTypeMap extends CustomTabProps {}
}

Fungerer bare ikke, trodde dette ville tillate at props-objektet blir slått sammen.

Arbeidende løsninger som jeg foretrekker å ikke bruke:

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>();

Bruke en innpakning

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>
)

Ignorerer prop-feilen

Relaterte artikler