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
Component selectors don't work with TypeScript CreateStyled<Theme>
#1320
Comments
Related to #1203? |
I have the same problem! Probably #1203. |
I ran into the same issue as well. |
I have the same problem... I switched to |
I had the same problem with I "overrode" the existing typings from @emotion/styled because it is the problem of our not typed theme in styled-components. customTypings.d.ts Whit this, you can use the @emotion/styled (this is the alias that you need to use because macros search this alias from babel-preset-emotion and if you use other it will no parse anything) I am doing the same that you have to do to create a "custom theme" into typings, with this i avoid to play gith alias in webpack and declare this modules in typings (it creates problems with HMR). When you use your styled now you have a typed theme. anyComponent.tsx There is only one case in which this solution doesn't work, it is if you need to have more than one different theme in the same project (to be honest i don't think anybody need this) |
So no one else has to retype the above code, I added import { CreateStyled } from '@emotion/styled/types/index';
import { MyTheme } from '../../src/myTheme';
export * from '@emotion/styled/types/index';
const customStyled: CreateStyled<MyTheme>;
export default customStyled; |
Where did you exactly added it? |
I tried the module declaration approach above but I get Typescript errors any time I try to reference the theme:
throws this: |
Could you provide the module declaration? Is the type of the theme in the line |
@IvanRodriCalleja The module declaration looks like this:
A truncated version of the Theme definition:
|
I've got simplified example here that works fine: https://codesandbox.io/s/emotion-issue-template-bqs1k I'm not sure what's different in my setup that's causing it to not work. |
Move your global.d.ts at the same folder that package.json, i did that and it worked. |
@IvanRodriCalleja That actually worked! Thanks! |
Sorry to use this issue for general TS support, but I'm really struggling with this issue. I've tried both the declare module "@emotion/styled" {
import { CreateStyled } from "@emotion/styled/types/index";
import { Theme } from "./src/theme/types";
export * from "@emotion/styled/types/index";
const customStyled: CreateStyled<Theme>;
export default customStyled;
} but if I declare edit: I got around this issue by importing |
@tpict Are you using Nextjs by chance ? To get around, I've just created an alias in both tsconfig.json and babelrc. i.e: In tsconfig.json
.babelrc
Then changed the import to In my case it's specific nextjs and frankly I didn't to spend too much time, just noticed the path/module resolution was not good and made an alias. But I think this can work in other scenarios as well. |
This will be addressed with #1220 |
emotion
version: 10.0.10react
version: 16.8.6Relevant code:
styled.ts
:text.tsx
:someOtherFile.tsx
:What you did:
styled
.What happened:
I received an error:
Reproduction:
Problem description:
Switching to
test.tsx
to useimport styled from '@emotion/styled'
rather than our version of styled with theming.Suggested solution:
Make
babel-plugin-emotion
support what is documented in the "Typescript.md" file.The text was updated successfully, but these errors were encountered: