Definitelytyped: [styled-components] No overload matches this call for attrs components

[kirill-konshin]

export const Badge = styled.span.attrs<{danger?: boolean}>(props => ({
    className: `badge badge-warning ${props.danger && 'badge-danger'}`,
}))`
    ${marginLeft};
`;

Results in a following error at usage point during compilation:

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style" | "title" | ... 252 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "ref" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.

• [x] I tried using the @types/styled-components package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @surgeboris @sandersn @Jessidhia @smockle @Igorbek @Igmat @Lavoaster @eps1lon @flavordaaave @wagerfield @Lazyuki @mgoszcz2
  
  

[jeanbispo]

I'm having a similar problem

[archangel-irk]

I have the same problem with styled.input and size attribute. I want to use this attribute in my component but since SC passes this attr to html input the typings are incorrect for me.

Is the solution to avoid using well known html attributes like size?

[hankchiutw]

I got the No overload matches this call error in a similar scenario and have a workaround.

What I encountered
I defined a styled component like this:

interface WrapperProps {
  color: MyColorType;
}
const Wrapper = styled.input.attrs((props: WrapperProps) => {
  return {
    style: {
      background: ``,
    },
  };
})``;

and use it like the following:

<Wrapper as="input" color={color}></Wrapper>

Thus I got the error No overload matches this call for color={color}.

Workaround to avoid the error

const Wrapper = styled.input.attrs((props: WrapperProps) => {
  return {
    color: props.color,  // <-- add this line
    style: {
      background: ``,
    },
  };
})``;

Actually, not only props.color, setting any value to color seems also work.

[jtanadi]

I was running into the same problem, but was able to solve it based on this SO answer.

So based on @kirill-konshin's code, something like this worked for me:

type PropType = {
  danger?: boolean
}

export const Badge = styled.span.attrs((props: PropType) => ({
    className: `badge badge-warning ${props.danger && 'badge-danger'}`,
}))<PropType>`
    ${marginLeft};
`;

[mtrabelsi]

OR this:

type OtherDataWrapperType = {
    fullWidth?: boolean
}

export const OtherDataWrapper = s.div<OtherDataWrapperType>`
    display: flex;
    justify-content: ${p => p.fullWidth ? 'center' : 'space-between'} ;

        <OtherDataWrapper fullWidth={true}>
            <Merchant>{merchant}</Merchant>
            <div>{amount.value} {amount.currency}</div>
        </OtherDataWrapper>

[seb-thomas]

I get this error in VS Code and I'm not using Typescript :/