如何让Material UI的styled() svg图标接受svg图标作为react组件？

Question

我有以下代码当前正在运行，但问题是我使用“any”作为道具的类型。在重构到 MUI v5 之前，这种方法没有任何问题。使用 mui v4 makeStyles

// SVG Icons components import 
import { ReactComponent as AppLogo } from '../../../icons/appLogo.svg';




// Styled Mui Component 
export const StyledLogo = styled(SvgIcon)<any>(({ theme }) => ({
  backgroundColor: 'white',
  fill: theme.palette.primary.main,
  width: 50,
  height: 50,
  borderRadius: 10,
  margin: 5,
  verticalAlign: 'middle',
}));



<StyledLogo component={AppLogo} viewBox='0 0 700 700' />

因此，当我删除任何内容时，组件道具会显示任何错误提示

输入'{组件：FunctionComponent;视图框：字符串； }' 不可分配给类型 'IntrinsicAttributes & {children?: ReactNode;课程？： 部分 |不明确的;颜色？：OverridableStringUnion<"inherit" | ... 7 more ... | "warning", SvgIconPropsColorOverrides> |不明确的; ...还有6个...； viewBox？：字符串|不明确的; } & CommonProps & 省略<...> & MUIStyledCommonProps<...> & { ...; }'。 类型“IntrinsicAttributes & {children?: ReactNode;”上不存在属性“组件”课程？： 部分 |不明确的;颜色？：OverridableStringUnion<"inherit" | ... 7 more ... | "warning", SvgIconPropsColorOverrides> |不明确的; ...还有6个...； viewBox？：字符串|不明确的; } & CommonProps & 省略<...> & MUIStyledCommonProps<...> & { ...; }'.ts(2322) （属性）组件：React.FunctionComponent

知道如何使其兼容...并且我不想使用图标导入上显示的任何当前类型：

const AppLogo：React.FunctionComponent

Answer 1

它对我来说是这样的：

export const StyledLogo = styled(SvgIcon)<{component?: any}>(({ theme }) => ({
  backgroundColor: 'white',
  fill: theme.palette.primary.main,
  width: 50,
  height: 50,
  borderRadius: 10,
  margin: 5,
  verticalAlign: 'middle',
}));

Answer 2

import React from "react";
import { styled, SvgIconProps } from "@mui/material";
import { Add as ExampleIcon } from "@mui/icons-material";

const StyledIcon = styled<React.ComponentType<SvgIconProps>>(ExampleIcon)({
  cursor: "pointer", // example styles
});
// Usage: <StyledIcon />

// or alternatively using your approach
const StyledIcon = styled<React.ComponentType<SvgIconProps>>(SvgIcon)({
  cursor: "pointer", // example styles
});
// Usage: <StyledIcon component={ExampleIcon} />