Emotion: Property 'children' does not exist on type 'IntrinsicAttributes & ThemeProviderProps<{}>'. TS2322

[bitttttten]

I have a pretty small project that I am setting up with emotion. I am using Typescript and I am getting this error from the title:

/mnt/d/Projects/simmer/src/index.tsx
Type error: Type '{ children: Element; theme: { colors: { primary: { light: string; neutral: string; dark: string; }; secondary: { light: string; dark: string; }; background: string; surface: string; error: string; tones: { ...; }; on: { ...; }; }; font: { ...; }; scale: MTScale; sizing: MTSizing; }; }' is not assignable to type 'IntrinsicAttributes & ThemeProviderProps<{ colors: { primary: { light: string; neutral: string; dark: string; }; secondary: { light: string; dark: string; }; background: string; surface: string; error: string; tones: { ...; }; on: { ...; }; }; font: { ...; }; scale: MTScale; sizing: MTSizing; }>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & ThemeProviderProps<{ colors: { primary: { light: string; neutral: string; dark: string; }; secondary: { light: string; dark: string; }; background: string; surface: string; error: string; tones: { ...; }; on: { ...; }; }; font: { ...; }; scale: MTScale; sizing: MTSizing; }>'.  TS2322

import { css, Global } from '@emotion/core'
import { ThemeProvider } from 'emotion-theming'
import React from 'react'
import { render } from 'react-dom'
import App from './App'
import atoms from './theme/atoms'

render(
    <ThemeProvider theme={atoms}>
        <>
            <Global
                styles={css`
                    body {
                        margin: 0;
                        padding: 0;
                        font-family: sans-serif;
                        -webkit-font-smoothing: antialiased;
                        -moz-osx-font-smoothing: grayscale;
                    }
                `}
            />
            <App />
        </>
    </ThemeProvider>,
    document.getElementById('root'),
)

    "dependencies": {
        "@emotion/core": "^10.0.6",
        "@emotion/styled": "^10.0.6",
        "@types/jest": "^23.3.13",
        "@types/node": "^10.12.21",
        "@types/react": "^16.8.1",
        "@types/react-dom": "^16.0.11",
        "emotion-theming": "^10.0.6",
        "prettier": "^1.16.4",
        "react": "^16.7.0",
        "react-dom": "^16.7.0",
        "react-scripts": "2.1.3",
        "typescript": "^3.3.1"

Reproduction:

You can install this repo: https://github.com/bitttttten/simmer

[wesrice]

@bitttttten I'm having the same issue. It looks like this issue is an incompatibility with TypeScript 3.3, and a commit has been made to emotion-theming to address this issue. You can either wait for the next emotion-styled release or downgrade to TypeScript 3.2.x for the time being.

[bitttttten]

Oh good to know, thanks for the explanation!

[bitttttten]

It's been fixed in [email protected]