TypeScript error when trying to style component inside a styled component
KrzysztofKarol opened this issue · 0 comments
KrzysztofKarol commented
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>
);