T
TanStack•9mo ago
harsh-harlequin

How to retain type information in styled components?

I'm going through the motions of upgrading router to latest version and I ended up running into type errors with @emotion/styled. If I have a route with a token, a styled link will result in incompatible params. I can work around it with LinkProps: 
const StyledLink = styled((props: LinkProps<'/path/to/$token'>) => <Link {...props} />)`...`

// in JSX now params type matches
<StyledLink to="/path/to/$token" params={{ token: "my-token" }} />
const StyledLink = styled((props: LinkProps<'/path/to/$token'>) => <Link {...props} />)`...`

// in JSX now params type matches
<StyledLink to="/path/to/$token" params={{ token: "my-token" }} />
Is there a more concise/better way to achieve this?
1 Reply
metropolitan-bronze
metropolitan-bronze•9mo ago

Did you find this page helpful?