emotion: Components created with CreateStyled type incorrectly expects a `theme` prop

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.

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?

@mbrochh there are really not that many breaking changes. You can read through all changes by browsing .md files in the .changeset directory here: https://github.com/emotion-js/emotion/pull/1600/files?file-filters[]=.md

@grsmvg well it looks like we’re doing the same thing and it’s still expecting a prop on my end. ¯_(ツ)_/¯

@grsmvg My issue is happening more when I’m defining a theme. Even though the theme is typed correctly it’s still expecting a theme prop. I’ve noticed this issue happens on any version of typescript that is greater than 3.1 +.

What I find interesting is that even if I type theme with an optional theme prop typescript still yells at me.