嘗試在樣式組件內使用道具時出現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;
`;