jantimon/next-yak

TypeScript error when trying to style component inside a styled component

KrzysztofKarol opened this issue · 0 comments

To Reproduce
https://stackblitz.com/edit/stackblitz-starters-6risew?file=app%2Fpage.tsx
Here's a minimal code snippet to reproduce the issue:

import { styled } from 'next-yak';

const Child = styled.div<{ $hasError: boolean }>`
  background: ${({ $hasError }) => ($hasError ? 'red' : 'green')}
`;

const Parent = styled.div`
  ${Child} {
    margin-top: 16px;
  }
`;

export default () => (
  <Parent>
    {/* ^^ Property '$hasError' is missing in type '{ children: Element[]; }' but required in type '{ $hasError: boolean; }'. */}
    <div>foo</div>
    <Child $hasError>bar</Child>
  </Parent>
);