Using TypeScript with Styled-Components

Oh wow, this one got me pretty bad.

When I first implemented TypeScript in my NextJS application with Styled Components, the compiler really spat the dummy!

No overload matches this call

Oh yuck!!

Failed to compile.
ERROR in /Users/ben/Desktop/Work
9:24 No overload matches this call.

After a brief dive into Google land, I found my problems, or which there were several.

I’m gonna jump straight to the solution (cause that’s what we all want, right?) and then I’ll lay out the stupid stuff I did to cause this error. Many thanks to Patrick Edge for providing the answer!

Basically, if you’re using a prop inside of Styled Components that has a type definition set, you have to provide a type definition for it in your Component.styles.ts file too, as I’ve done in this example:

MobileMenu.tsx

import { MobileMenuContainer } from "./MobileMenu.styles";
import { MenuLink } from "./components";
type MenuProps = {
  isVisible: boolean;
};
const MobileMenu = ({ isVisible }: MenuProps) => (…