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

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 ...”不能分配给“插值”类型的参数。 键入'{（message ?: any，... optionalParams：any []）：void; （消息？：任意，... optionalParams：任意[]）：voi ...”不能分配给“ ReadonlyArray | Interpolat ......“。 类型'{（消息？：任何，... optionalParams：任何[]）类型中缺少属性'concat'：void; （消息？：任意，... optionalParams：任意[]）：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;
`;