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

@emotion/styled

.
If I have a route with a token, a styled link will result in incompatible

params

params

.
I can work around it with

LinkProps

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?

TanStack•13mo ago•

1 reply

moderate-tomato

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

@emotion/styled

.
If I have a route with a token, a styled link will result in incompatible

params

params

.
I can work around it with

LinkProps

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?

How to retain type information in styled components?

Similar Threads

How to retain type information in styled components?

Similar Threads

Similar Threads

Similar Threads