Sunday, May 19, 2024
Homepage · reactjs
 Popular · Latest · Hot · Upcoming
97
rated 0 times [  100] [ 3]  / answers: 1 / hits: 7244  / 2 Years ago, fri, april 8, 2022, 12:00:00

Example with error: https://codesandbox.io/s/flamboyant-lederberg-w16pio?file=/src/App.tsx


I am trying to extend from Mui's types to add a few more variants. I'm already extending from Muis base props. interface IText extends TypographyProps {


I'm after avoiding having to manage all of the types that Mui have already defined. In this exact case it is here:


"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline"

In theory, the final outcome of the props would be:


 "inherit" | "caption12r" | "caption12ruc" | "caption12buc" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline"

Error


enter


TS2769: No overload matches this call.   Overload 1 of 2, '(props: { component: ElementType<any>; } & SystemProps<Theme> & { align?: "right" | "left" | "inherit" | "center" | "justify" | undefined; children?: ReactNode; ... 6 more ...; variantMapping?: Partial<...> | undefined; } & CommonProps & Omit<...>): Element', gave the following error.     Type '{ "data-name": string; component?: string | undefined; variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | ... 4 more ... | undefined; ... 352 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type '{ component: ElementType<any>; }'.       Types of property 'component' are incompatible.         Type 'string | undefined' is not assignable to type 'ElementType<any>'.           Type 'undefined' is not assignable to type 'ElementType<any>'.   Overload 2 of 2, '(props: DefaultComponentProps<TypographyTypeMap<{}, "span">>): Element', gave the following error.     Type '{ "data-name": string; component?: string | undefined; variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | ... 4 more ... | undefined; ... 352 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type '{ align?: "right" | "left" | "inherit" | "center" | "justify" | undefined; children?: ReactNode; classes?: Partial<TypographyClasses> | undefined; ... 5 more ...; variantMapping?: Partial<...> | undefined; }'.       Types of property 'variant' are incompatible.         Type '"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "inherit" | "caption12r" | "caption12ruc" | "caption12buc" | undefined' is not assignable to type '"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "inherit" | undefined'.

Code where extending is failing


import React from "react";

import { Typography as MUITypography, TypographyProps } from "@mui/material";

import { OverridableStringUnion } from "@mui/types";

import { Variant } from "@mui/material/styles/createTypography";

import { TypographyPropsVariantOverrides } from "@mui/material/Typography/Typography";



interface IText extends TypographyProps {

  component?: string;

  variant?: OverridableStringUnion<

    Variant | "inherit" | "caption12r" | "caption12ruc" | "caption12buc",

    TypographyPropsVariantOverrides

  >;

}

I have also tried to extend it via a tsModules with:


export interface EleMuiVariantOverrides {

  'icon': true;

}



declare module "@mui/material/Button/Button" {

  interface ButtonPropsVariantOverrides extends EleMuiVariantOverrides {}

}

More From » reactjs
 Answers
7

To extend Typography variants you can do so:


import React from "react";

import {

  Typography,

  TypographyProps,

  createTheme,

  ThemeOptions,

  ThemeProvider

} from "@mui/material";

import { TypographyOptions } from "@mui/material/styles/createTypography";



declare module "@mui/material/Typography" {

  interface TypographyPropsVariantOverrides {

    caption12r: true;

  }

}



interface ExtendedTypographyOptions extends TypographyOptions {

  caption12r: React.CSSProperties;

}



const theme = createTheme({

  typography: {

    caption12r: {

      color: "red"

    }

  } as ExtendedTypographyOptions

} as ThemeOptions);



const Text = (props: TypographyProps) => {

  return <Typography {...props} data-name="CLText" />;

};



export default function App() {

  return (

    <ThemeProvider theme={theme}>

      <div className="App">

        <Text variant="caption12r">Jamie</Text>

      </div>

    </ThemeProvider>

  );

}

For more details please refer to MUI documentation.


In your codesandbox I can see also an attempt to use extended variants for a Button; sorry but I can't help on that.


[#209] Wednesday, March 30, 2022, 2 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
mckaylab
Add To Favorites
Follow
Total Points: 311
Total Questions: 120
Total Answers: 93
Location: Montenegro
Member since Thu, Jun 16, 2022
2 Years ago
mckaylab questions
Mon, Apr 4, 22, 00:00, 2 Years ago
Wed, Dec 1, 21, 00:00, 3 Years ago
Mon, Apr 26, 21, 00:00, 3 Years ago
Wed, Jul 24, 19, 00:00, 5 Years ago
Thu, Jun 27, 19, 00:00, 5 Years ago
View All
;