No overload matches this call with styled components TypeScript

How to solve this problem ASAP!!!

Problem

No overload matches this call in TypeScript is really annoying and there aren’t too many solutions around there, though we have a solution!!

Example No overload matches this call.

You need to create an interface and inside that interface you only need is to add and object with all the types that you need, but I have added o? because it is optional.

Example Interface

After that, you have to set it after the styled.button (in this case) as a Generic, this will only accept this object with all the types that you needed on the interface.

Adding generic to the Styled component

And finally, you only need to add “o” because we create that “o” on the interface as an attribute of your Button styled component with the types that we added on the interfaces.

Example styled component without error “No overload”

Complete Example of no error in styled component

Code

import styled from 'styled-components'
interface Props {
o?: {
background: string,
width: string,
height: string,
color: string }
}
const Button = styled.button<Props>`padding: 10px;`
const Btn = () => {
return <Button o={({
background: 'green',
width: '150px',
height: 'auto',
color: 'red'})} ></Button>
}
export default Btn

Conclusion

This Error is really easy to solve, but I have Really figured it out how to solve it because there aren’t many solutions and this is not as difficult as it shows the error is astonished but if you are persistent or too pushy you will conquer it, and this solution will help you a lot with that.

Sources

No overload matches this call with styled components