MUI v5 (Styled, TypeScript) System props transmission error

Question

I just started learning Material ui and ran into a problem:

import React from 'react';
import { styled, Typography } from '@mui/material';

interface DescriptionProps {
  textTitle: string;
  type?: string;
}

const TitleStyled = styled(Typography, {
  shouldForwardProp: (prop) => prop !== "isSubtitle",
})<{ isSubtitle?: string; }>(({ isSubtitle }) => ({
  fontWeight: 700,
  fontSize: isSubtitle ? '18px' : '24px',
  lineHeight: isSubtitle ? '21px' : '28px',
  letterSpacing: 'inherit'
}))

export const Description = ({
  textTitle,
  type = '',
}: DescriptionProps) => {
  const customTag = type === 'subtitle' ? 'h3' : 'h2';

  return (
    <TitleStyled
      component={customTag}   //  Error
      isSubtitle={type}
    >
      {textTitle}
    </TitleStyled>
  );
};

Error:

TS2322: Type '{ children: string; component: string; isSubtitle: string; }' is not assignable to type 'IntrinsicAttributes & SystemProps & { align?: "right" | "left" | "center" | "inherit" | "justify" | undefined; children?: ReactNode; ... 6 more...; variantMapping?: Partial<...> | undefined; } & CommonProps & Omit<...> & MUIStyledCommonProps<...> & {...; }'. Property 'component' does not exist on type 'IntrinsicAttributes & SystemProps & { align?: "right" | "left" | "center" | "inherit" | "justify" | undefined; children?: ReactNode; ... 6 more...; variantMapping?: Partial<...> | undefined; } & CommonProps & Omit<...> & MUIStyledCommonProps<...> & {...; }'.

enter image description here

I tried to add as typeof Typography

enter image description here

Update: added to config.json:

"compilerOptions": {
   "paths": {
      "@mui/system": "@mui/material/node_modules/@mui/system"
   },

the application is working, but the error is still highlighted in red

Answer 1

You need to add a type for the component prop:

const TitleStyled = styled(Typography, {
  shouldForwardProp: (prop) => prop !== "isSubtitle"
})<{ 
  isSubtitle?: string, 
  component: string // <= Add a type for component:
}>(({ isSubtitle }) => ({
...

Reference