reactjs 如何让mui的styled()svg图标接受svg图标作为react组件?

tvz2xvvm  于 2023-05-22  发布在  React
关注(0)|答案(1)|浏览(202)

我有下面的代码,目前正在工作,但问题是,我使用“任何”作为 prop 的类型。在重构到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' />

所以当我删除任何,组件 prop 显示任何错误告诉
类型“{ component:FunctionComponent<SVGProps & { title?:字符串|}>; String:String;}”不能分配给类型“IntrinsicAttributes & { children?:ReactNode; class?:Partial| undefined; color?:OverridableStringUnion<“inherit”|...还有7个...|“warning”,SvgIconPropsColorOverrides>| undefined;... 6 more ...; viewBox?:string| undefined; } & CommonProps & Omit <...>& MUIStyledCommonProps <...>& { ...;}'。类型“IntrinsicAttributes & { children?:ReactNode; class?:Partial| undefined; color?:OverridableStringUnion<“inherit”|...还有7个...|“warning”,SvgIconPropsColorOverrides>| undefined;... 6 more ...; viewBox?:string| undefined; } & CommonProps & Omit <...>& MUIStyledCommonProps <...>& {...;}'. ts(2322)(属性)组件:React.FunctionComponent<React.SVGProps & { title?:字符串|undefined;
有什么办法能让这一切变得和谐我不想使用任何当前类型显示在图标导入:
const AppLogo:React.FunctionComponent<React.SVGProps & { title?:字符串|未定义; }>

t3psigkw

t3psigkw1#

它对我来说是这样的:

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

相关问题