redux 属性'component'不存在reactjs + materialUI +类型脚本？

8ulbf1ek 于 2022-12-27 发布在 React

关注(0)|答案(2)|浏览(173)

我正在创建自定义排版。但在使用时，我得到以下错误。
本人遵循以下文件
https://mui.com/material-ui/api/typography/
下面是我代码https://codesandbox.io/s/fragrant-mountain-eukirg

import * as React from "react";
import Typography, { TypographyProps } from "@mui/material/Typography";
import { styled } from "@mui/material/styles";

const LabelXs = styled(Typography)<TypographyProps>(({ fontWeight }) => {
  return {
    fontSize: 15
  };
});

export default LabelXs;

我是这样用的

<LabelXs component={"div"}>Div element</LabelXs>

为什么显示错误？

[![Property 'component' does not exist on type 'IntrinsicAttributes & SystemProps<Theme> & { align?: "right" | "left" | "inherit" | "center" | "justify" | undefined; children?: ReactNode; ... 6 more ...; variantMapping?: Partial<...> | undefined; } & CommonProps & Omit<...> & MUIStyledCommonProps<...>'.ts(2322)][1]][1]

有什么建议吗？

组件props存在，为什么您说它不存在https://mui.com/material-ui/api/typography/

redux

来源：https://stackoverflow.com/questions/74916710/property-component-does-not-exist-reactjs-materialui-typescript

2条答案

按热度按时间

sf6xfgos1#

组件似乎没有出现在TypographyProps中。因此，受@SteveGomez的启发，您可以执行以下操作：第一个月

import * as React from "react";
import Typography, { TypographyProps } from "@mui/material/Typography";
import { styled } from "@mui/material/styles";

const LabelXs = styled(Typography)<TypographyProps & {component: React.ElementType}>(({ fontWeight }) => {
  return {
    fontSize: 15
  };
});

export default LabelXs;

编辑：您也可以使用{component: keyof JSX.IntrinsicElements}。

赞(0）回复(0）举报 2022-12-27

mqkwyuun2#

为了能够使用组件prop，prop的类型应该与type参数一起使用。只要按照文档中提到的那样使用React.ElementType即可。

const LabelXs = styled(Typography)<
  TypographyProps & { component: React.ElementType }
>(({ fontWeight }) => {
  return {
    fontSize: 15
  };
});

现在component接受任何React自定义组件和HTML元素。
Docs

赞(0）回复(0）举报 2022-12-27

我来回答

redux 属性'component'不存在reactjs + materialUI +类型脚本？

2条答案

相关问题

热门标签

最新问答