React + Typescript样式图标作为道具

Question

当我尝试将样式图标作为道具传递给组件时，出现错误：

未处理的拒绝（SyntaxError）：意外的标识符。

import { PersonOutline } from 'styled-icons/material/PersonOutline'

这是我的TextField组件的道具

import { StyledIcon } from 'styled-icons/types';


interface IProps {
  type: string;
  placeholder: string;
  icon: StyledIcon;
}

const TextField = (props: IProps) => {...

和我的TextField看起来像：

<TextField icon={<PersonOutline size="20" color={colors.gray500}/>} type={'text'} placeholder={'Name'} />

Answer 1

那是因为

  

如果您使用的是Next.js，您可能还希望安装next-plugin-styled-icons以利用摇树的优势。