Components created with CreateStyled<Theme> type incorrectly expects a `theme` prop

Current behavior:

Recently upgraded to emotion 10 from 9, and ran into this issue with theme typing following the official recommended way to type themes using the CreateStyled type: https://emotion.sh/docs/typescript#define-a-theme

Here’s a minimal repro I created from the standard React TypeScript sandbox:

https://codesandbox.io/embed/emotion-bug-typescript-required-theme-prop-jqdo9

Property 'theme' is missing in type '{ children: Element; }' but required in type '{ theme: { primaryColor: string; }; }'.ts(2741)

To reproduce:

1. Open the sandbox: https://codesandbox.io/embed/emotion-bug-typescript-required-theme-prop-jqdo9
2. Click “Open in Editor” on the top right (for some reason type errors don’t show up in the default view)
3. Hover over <Themed>

Expected behavior:

No type errors. Themed doesn’t actually accept a required theme prop. theme is something that gets injected by the internal context consumer, not exposed as a part of the component API.

Environment information:

• react version: 16.8.4
• emotion version: 10.0.14

I made a temporary workaround here to unblock our upgrade: https://github.com/lewisl9029/emotion/pull/1/files

That addresses the symptom of the issue, but I had a really difficult type following the typings here and so I’m not sure about the ramifications of the change I made or whether it’s a good fix at all.

Let me know if there’s anything else I can do to help!

[mbrochh]

OK, I updated to @next, in case anyone else finds this thread in a similar situation, here is what I did:

yarn add @emotion/react@next
yarn add @emotion/styled@next
yarn add @emotion/babel-preset-css-prop@next
yarn add react-emotion@next

I removed a few things from package.json:

@emotion/core
emotion-theming
storybook-addon-emotion-theme

Then I replaced emotion with @emotion in .babelrc and changed the autoLabel option from true to never.

Next, I replaced @emotion/core with @emotion/react in the entire project.

For Storybook, I created a custom withThemeProvider decorator and then used my custom decorator instead of the storybook-addon-emotion-theme (I’m sure sooner or later that plugin will be updated):

import * as React from 'react'
import { ThemeProvider } from '@emotion/react'

import theme from '../src/theme'

export const withThemeProvider = () => story => {
  return <ThemeProvider theme={theme}>{story()}</ThemeProvider>
}

I had a custom styled.tsx file in my project in order to get Typescript autocompletion for my theme, that file is now deleted. Instead, I now have a typings/emotion.d.ts file with the following content:

import '@emotion/react'

import theme from '../theme'

export type ThemeType = typeof theme

declare module '@emotion/react' {
  export interface Theme extends ThemeType {}
}

Finally I replaced all my import styled from '../../styled' imports with good old import styled from '@emotion/styled'.

I think that was it… went pretty smoothly! ~45 minutes of work.

[feychenie]

Same issue also when upgrading Typescript from 3.7 to 3.8, had to go back to 3.7.5 @mbrochh what version of TS are you using?