Emotion theming with TypeScript: Property 'X' does not exist on type 'object'. ts(2339)

Question

I can't find a way to make Emotion theming work with TypeScript.

import React from "react";
import { ThemeProvider } from "emotion-theming";
import styled from "@emotion/styled";

const theme = {
  colors: {
    gray: "#ccc",
  },
};

const MyComponent = styled.div((props) => ({
  color: props.theme.colors.gray,
}));

const App = () => (
  <ThemeProvider theme={theme}>
    <MyComponent />
  </ThemeProvider>
);

export default App;

The docs says: "By default, props.theme has an any type annotation and works without any errors". But I have one on props.theme.colors.gray: Property 'colors' does not exist on type 'object'.ts(2339)

Am I missing something here?

I checked in here the `theme` seems to be an object: https://github.com/emotion-js/emotion/tree/master/packages/emotion-theming#api — tanmay, Oct 26 '20 at 12:41
Yes, `theme` should be an object (which is the case here) or a function returning an object. I don't know why TS is complaining. — webdif, Oct 26 '20 at 13:18
can you make a codesandbox recreating this? I'm not sure I'd be able to solve it but I am keen to see what's going on — tanmay, Oct 26 '20 at 13:48

score 8 · Answer 1 · answered Sep 07 '21 at 16:38

8

Emotion 11 simplified this.

Define your Theme in an emotion.d.ts file

   declare module '@emotion/react' {
      export interface Theme {
        colors : {
          primary: string;
          secondary: string;
        };
      }
    }

This provides an override for the empty Theme interface within Emotion.

https://emotion.sh/docs/typescript#define-a-theme

answered Sep 07 '21 at 16:38

cgatian

22,047
9
56
76

1

And where do you put this file and how to use it? The docs are not clear to me. – Ini Jun 08 '22 at 13:58
1

@Ini I've added an answer continuing on this answering your question. – aderchox Jun 08 '22 at 18:01

score 2 · Answer 2 · answered Jun 08 '22 at 18:01

Continuing on @chatian's helpful answer, after you've made the .d.ts file, then put it somewhere in your project, e.g., in the "src" folder, and specify it as an "ambient file" to be used by the TS runtime of your editor by adding its directory path, i.e. "src", in the "include" array of your tsconfig.json file.

Now you should be able to use both your own types and import the types you extend from emotion in your tsx files, e.g., import { Theme } from "@emotion/react".

An example codesandbox: https://codesandbox.io/s/9z2md?file=/src/global.d.ts

Notice since the Theme type in the above example is not "extending" emotion's Theme type then you don't need to import it at all and you have access to it globally.

(note: this sandbox was not created by me so credit goes to nerdyman.)

Emotion theming with TypeScript: Property 'X' does not exist on type 'object'. ts(2339)

2 Answers2