reactjs MUI v5(样式,TypeScript)系统属性传输错误

oalqel3c  于 2023-01-30  发布在  React
关注(0)|答案(1)|浏览(123)

我刚开始学习Material ui,就遇到了一个问题:

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

错误:
TS2322:类型"{子级:字符串;组件:字符串;是字幕:字符串;}"不能赋值给类型" IntrinsicAttributes & SystemProps & {align?:"权利"|"左"|"中心"|"继承"|"自圆其说"|未定义;儿童?:React节点;...还有6个...变体Map?:部分<...>未定义;}&通用属性&省略& MUI样式通用属性&{...;}'。|类型"IntrinsicAttributes & SystemProps & {align?:"上不存在属性"component"<...>"权利"<...>"左" "中心""继承"|"自圆其说"|未定义;儿童?:|React节点;...还有6个...|变体Map?:|部分未定义;}&通用属性&省略& MUI样式通用属性&{...;}'。 variantMapping?: Partial<...>| undefined; } & CommonProps & Omit<...> & MUIStyledCommonProps<...> & { ...; }'.
enter image description here
我尝试添加as typeof Typography
enter image description here

***更新:***添加到配置json:

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

应用程序正在运行,但错误仍以红色突出显示

093gszye

093gszye1#

您需要为component属性添加一个类型:

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

Reference

相关问题