Question

我正在使用带类型脚本的样式化组件，并且实际上读过docs。简单样式时，无需使用道具-一切正常：

interface IButtonWithIcon {
  children: string,
  type?: string,
  size?: number,
}

const ButtonWithIcon = styled<IButtonWithIcon, 'button'>('button')`
  color: black;
  border-radius: 5px;
  cursor: pointer;
`;

但是当我尝试时，甚至只是将道具登录到控制台，就像这样：

const ButtonWithIcon = styled<IButtonWithIcon, 'button'>('button')`
  ${console.log}
  color: black;
  border-radius: 5px;
  cursor: pointer;
`;

TS开始抱怨：

'{类型的参数（消息？：任意，... optionalParams：任意[]）：无效；（消息？：任意，... optionalParams：任意[]）：voi ...'不可分配到“插值”类型的参数。输入'{（消息？：任意， ... optionalParams：any []）：void; （消息？：任意，...可选参数： any []）：voi ...'不能分配给类型'ReadonlyArray | Interpolat ...'。类型'{（消息？：任何，... optionalParams：任何[]）类型中缺少属性'concat'：void; （消息？：任意，...可选参数： any []）：voi ...'。

如果添加注释，则错误消息会更改：

const ButtonWithIcon = styled<IButtonWithIcon, 'button'>('button')`
${(props: IButtonWithIcon): void => console.log(props)}
color: black;
border-radius: 5px;
cursor: pointer;
`;

'（props：IButtonWithIcon）=> void'类型的参数不可分配到“ Interpolation>”类型的参数。类型'（props：IButtonWithIcon）=>无效'是不可分配的键入“ ReadonlyArray | Interpolat ...'。类型“（props：IButtonWithIcon）=> void”中缺少属性“ concat”。

下面的代码有什么问题？

Answer 1

内插到CSS中的函数必须返回某些内容。试试：

const ButtonWithIcon = styled<IButtonWithIcon, 'button'>('button')`
  ${(props) => { console.log(props); return ""; }}
  color: black;
  border-radius: 5px;
  cursor: pointer;
`;

尝试在样式组件内使用道具时出现TS错误

1 个答案: