Using TypeScript and Styled Components `as` prop
up vote
0
down vote
favorite
I have a styled button:
import Link from 'react-router-dom'
import styled from 'styled-components'
const Button = styled(Link)`
display: block;
border: 1px solid white;
padding: 5px;
`
I can use it as a Link:
<Button to='/' />
But sometimes I would like to use it as an a:
<Button as='a' href='/' />
But in a second case TypeScript is complaining with:
Type ' children: string; as: string; href: string; ' is not assignable to type 'Readonly<ThemedOuterStyledProps<WithOptionalTheme<LinkProps, any>, any>>'.
Property 'to' is missing in type ' children: string; as: string; href: string; '.
"as" polymorphic prop
typescript styled-components definitelytyped
asked Nov 9 at 16:52
Kocur4d
3,80851734
add a comment |
up vote
0
down vote
favorite
I have a styled button:
import Link from 'react-router-dom'
import styled from 'styled-components'
const Button = styled(Link)`
display: block;
border: 1px solid white;
padding: 5px;
`
I can use it as a Link:
<Button to='/' />
But sometimes I would like to use it as an a:
<Button as='a' href='/' />
But in a second case TypeScript is complaining with:
Type ' children: string; as: string; href: string; ' is not assignable to type 'Readonly<ThemedOuterStyledProps<WithOptionalTheme<LinkProps, any>, any>>'.
Property 'to' is missing in type ' children: string; as: string; href: string; '.
"as" polymorphic prop
typescript styled-components definitelytyped
asked Nov 9 at 16:52
Kocur4d
3,80851734
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a styled button:
import Link from 'react-router-dom'
import styled from 'styled-components'
const Button = styled(Link)`
display: block;
border: 1px solid white;
padding: 5px;
`
I can use it as a Link:
<Button to='/' />
But sometimes I would like to use it as an a:
<Button as='a' href='/' />
But in a second case TypeScript is complaining with:
Type ' children: string; as: string; href: string; ' is not assignable to type 'Readonly<ThemedOuterStyledProps<WithOptionalTheme<LinkProps, any>, any>>'.
Property 'to' is missing in type ' children: string; as: string; href: string; '.
"as" polymorphic prop
typescript styled-components definitelytyped
asked Nov 9 at 16:52
Kocur4d
3,80851734
I have a styled button:
import Link from 'react-router-dom'
import styled from 'styled-components'
const Button = styled(Link)`
display: block;
border: 1px solid white;
padding: 5px;
`
I can use it as a Link:
<Button to='/' />
But sometimes I would like to use it as an a:
<Button as='a' href='/' />
But in a second case TypeScript is complaining with:
Type ' children: string; as: string; href: string; ' is not assignable to type 'Readonly<ThemedOuterStyledProps<WithOptionalTheme<LinkProps, any>, any>>'.
Property 'to' is missing in type ' children: string; as: string; href: string; '.
"as" polymorphic prop
typescript styled-components definitelytyped
typescript styled-components definitelytyped
asked Nov 9 at 16:52
Kocur4d
3,80851734
asked Nov 9 at 16:52
Kocur4d
3,80851734
edited Nov 9 at 17:35
asked Nov 9 at 16:52
Kocur4d
3,80851734
asked Nov 9 at 16:52
Kocur4d
3,80851734
asked Nov 9 at 16:52
Kocur4d
3,80851734
3,80851734
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53230084%2fusing-typescript-and-styled-components-as-prop%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
