Twin.Macro (Styled Components) + Typescript in NextJS : Argument of type 'Interpolation<never>' is not assignable to parameter of type

Question

Just followed the twin.macro tutorial to set it up with next.js, styled-components & typescript. Followed everything in a newly setup project, but I'm getting this error:

./components/GlobalStyles.tsx:7:36 Type error: Argument of type 'Interpolation' is not assignable to parameter of type 'Interpolation<ThemeProps>'. Type 'InterpolationFunction' is not assignable to type 'Interpolation<ThemeProps>'. Type 'InterpolationFunction' is not assignable to type 'InterpolationFunction<ThemeProps>'. Type 'ThemeProps' is not assignable to type 'never'.

Seems to have to do with this line here in GlobalStyles.tsx:

const CustomStyles = createGlobalStyle`
  body {
    -webkit-tap-highlight-color: ${theme`colors.purple.500`} <=== this line
    ${tw`antialiased`}
  }
`;

but I'm not sure what to do about it, since I've followed everything to the dot?

edit: full GlobalStyles.tsx:

import React from "react";
import { createGlobalStyle } from "styled-components";
import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro";
 

const CustomStyles = createGlobalStyle`
  body {
    -webkit-tap-highlight-color: ${theme`colors.purple.500`} 
    ${tw`antialiased`}
  }
`;

const GlobalStyles = () => (
  <>
    <BaseStyles />
    <CustomStyles />
  </>
);

export default GlobalStyles;

Answer 1

Here's how I fixed this error:

...
const CustomStyles = createGlobalStyle`
  body {
    -webkit-tap-highlight-color: ${theme<string>('colors.purple.500')} // <-- the fix
    ${tw`antialiased`}
  }
...
`;