Closed daviddelusenet closed 4 years ago
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;
`}
`
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:This all works fine and TypeScript doesn't throw any errors. However, if I try to use the
isVisible
prop insidemedia
I'm getting errors:The
left
andopacity
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!