Property 'name' does not exist on type ThemedStyledProps

Question

I am getting an error

Property 'name' does not exist on type 'ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLSpanElement>, "slot" | "style" | ... 253 more ... | "css"> & { ...; }, any>'.

When using the code snippet

// Styled Components
const IconContainer: any = styled.span.attrs(props => ({
  className: `icon-${ props.name }`
}))\`
  display: inline-block;
  font-size: ${ props => props.size };
  color: ${ props => props.color };
  transform: ${ props => props.transform};
\`;

getting this error on line where props.name, props.size, props.transform is being used

Answer 1

So there's currently no way in TypeScript to pass a generic type to a tagged template literal

There are a few options. The first is provide the type for your first usage of props, and then ts will assume the rest of them are using that type

background: ${(props: Props} => props.theme.brand}; border: ${props => ...}

or use this withProps function

https://github.com/styled-components/styled-components/issues/630#issuecomment-317277803