Ошибки TS при попытке использовать реквизит внутри styled-component

Question

Я использую стилевые компоненты с type-script и на самом деле читаю 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;
`;

ТС начинает жаловаться:

Аргумент типа '{(сообщение ?: любой, ... необязательный параметр: любой []): void; (сообщение ?: любой, ... не обязательный параметр: любой []): voi ... 'не назначается к параметру типа «Интерполяция». Тип '{(сообщение ?: любой, ... optionParams: any []): void; (сообщение ?: любое, ... необязательные параметры: any []): voi ... 'нельзя присвоить типу' ReadonlyArray | Interpolat ... '. Свойство concat отсутствует в типе {{(message ?: any, ... optionParams: any []): void; (сообщение ?: любое, ... необязательные параметры: любой []): voi ... '.

Если я добавлю аннотацию, сообщение об ошибке изменится:

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

Аргумент типа '(props: IButtonWithIcon) => void' не может быть назначен к параметру типа «Интерполяция>». Тип '(props: IButtonWithIcon) => void' не присваивается набрать 'ReadonlyArray | Interpolat ... '. Свойство concat отсутствует в типе (props: IButtonWithIcon) => void '.

Что не так в коде ниже?

Answer 1

Функции, которые вы интерполируете в CSS, должны что-то возвращать. Попробуйте:

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