反应+打字稿样式图标作为道具

Question

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

未处理的拒绝（语法错误）：意外的标识符。

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

这是我的文本字段组件的道具

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

interface IProps {
  type: string;
  placeholder: string;
  icon: StyledIcon;
}
const TextField = (props: IProps) => {...

我的文本字段看起来像：

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

Answer 1

这是因为

如果您使用的是Next.js，您可能还希望安装下一个插件样式的图标以利用树摇动。