-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
as
prop of styled components in TypeScript
#1137
Comments
I cannot find a simple way that works with native DOM components and React components. |
Thanks for looking into this! |
just hit the same problem myself :( |
Same here 😄 |
Ran into this as well... Looks like withComponent works alright, so perhaps there is a way to use the logic there. |
After tinkering with this myself and consulting other people - I don't think |
@Andarist what about |
I don't use emotion anymore, but if it does not have the as prop as an optional parameter it should be done for all emotion components. The other issue (which is what I assume Andarist is referring to) that can't be solved now is getting TS to change the type signature based on what is specified in the as prop. |
@Andarist would love to get this reopened and implement @slavikdenis's suggestion |
This wouldn't be type-safe, but I guess we can just put it onto type system not being flexible enough to support this dynamic pattern. cc @JakeGinnivan thoughts on enabling this simplistic type for as prop? |
The |
Has this been resolved in the upcoming v11? Otherwise, I'd like to take a stab at it — any pointers to relevant files would be appreciated :) |
I don't think it has been done. In packages/styled-base/types/index.d.ts, add the Then in packages/styled-base/types/tests.tsx, write a component which consumes the prop to just make sure it all works as expected. |
Thanks for the hints @JakeGinnivan! Much appreciated. Unfortunately, the types have changed quite a bit in the Would you consider this a breaking change? Should I backport this to v10? |
I'm facing the same issue, the way I'm fixing it for now is just adding a Any update whether or not this is going to be natively supported? |
There’s a pending PR (#1874) to add it for Emotion 11. I’d be happy to backport it to 10 as well. |
Using emotion v10 as well, the type suggested above seems to work for me locally:
|
Just merged this into |
emotion
version: 10.0.5react
version: 16.6.3Relevant code:
What you did:
styled
functionThemeProvider
ExtraProps
to the styled functionas
prop from Emotion 10 to change the element being used.What happened:
Typescript complains about the
as
prop not existing on the styled componentReproduction:
I've created a code sandbox for this, but I don't think the setup there properly reflects mine. Since you can't seem to customize the tsconfig in the default Typescript + React starter, I don't know what else to do. In any case code sandbox does not show any typescript errors.
https://codesandbox.io/s/mzyzm524lj
Problem description:
I would like to not get compiler warnings about the
as
prop. If I addas
to my component'sExtraProps
(in the above example theHeadingProps
), the compiler stops complaining.Thanks a lot for the help. I love emotion and I've been using it for about a year now. Just new to the whole TypeScript thing. 😅
The text was updated successfully, but these errors were encountered: