Issue with TypeScript and custom props

[David de Lusenet]

Been using this package for multiple projects and really like it. However, in my latest project I'm using TypeScript and because of this I found a bug in styled-media-query.

I got a styled components which expects a isVisible boolean prop:

interface OverlayProps {
    isVisible: boolean;
}

export const Overlay = styled.div<OverlayProps>`
    color: ${({ isVisible }): string => (isVisible ? 'red' : 'green')};
`;

This all works fine and TypeScript doesn't throw any errors. However, if I try to use the isVisible prop inside media I'm getting errors:

interface OverlayProps {
    isVisible: boolean;
}

export const Overlay = styled.div<OverlayProps>`
    opacity: ${({ isVisible }): string => (isVisible ? '0.3' : '0')};

    ${media.lessThan('large')`
        background-color: ${({ theme }): string => theme.shades.one};
        position: fixed;
        top: 52px;
        left: ${({ isVisible }): string => (isVisible ? '260px' : '0')};
        width: 100%;
        height: 100%;
        z-index: 2;
        opacity: ${({ isVisible }): string => (isVisible ? '0.3' : '0')};
        cursor: pointer;
        transition: all 300ms ease;
    `}
`;

The left and opacity declarations are throwing the following error: Property 'isVisible' does not exist on type 'ThemeProps<any>'.

Screenshot:

Please let me know if you need any more information. Any help would be greatly appreciated!

[Yoshihiko Kuga]

Setting generics parameter to media.lessThan worked.
media.lessThan<OverlayProps>('large')

interface OverlayProps {
  isVisible: boolean;
}

export const Overlay = styled.div<OverlayProps>`
  opacity: ${({ isVisible }): string => (isVisible ? '0.3' : '0')};

  ${media.lessThan<OverlayProps>('large')`
      background-color: ${({ theme }): string => theme.shades.one};
      position: fixed;
      top: 52px;
      left: ${({ isVisible }): string => (isVisible ? '260px' : '0')};
      width: 100%;
      height: 100%;
      z-index: 2;
      opacity: ${({ isVisible }): string => (isVisible ? '0.3' : '0')};
      cursor: pointer;
      transition: all 300ms ease;
  `}
`