ReactJs Typescript, Emotion Js useTheme type

Question

Hello I am new to typescript, but I had the following question regarding the useTheme of emotionJs i have this code:

const GlobalStyle: React.FC = (props) => {
  const Theme = useTheme();
  return (
    <Global
      styles={css`
        @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
        @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

        body > #emasa > div {
          height: 100vh;
        }
        * {
          padding: 0;
          margin: 0;
        }
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
        *:focus {
          outline: 0;
          outline: none;
        }
        a {
          text-decoration: none;
          color: inherit;
          cursor: pointer;
        }
        button {
          background-color: transparent;
          color: inherit;
          border-width: 0;
          padding: 0;
          cursor: pointer;
        }
        figure {
          margin: 0;
        }
        input::-moz-focus-inner {
          border: 0;
          padding: 0;
          margin: 0;
        }
        ul,
        ol,
        dd {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          margin: 0;
          font-size: inherit;
          font-weight: inherit;
        }
        p {
          margin: 0;
        }
        cite {
          font-style: normal;
        }
        fieldset {
          border-width: 0;
          padding: 0;
          margin: 0;
        }

        body {
          background: ${Theme.colors.background};
          color: ${Theme.colors.text};
          transition-duration: 0.4s;
          transition-property: background-color, color;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
            'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
            sans-serif;
        }
      `}
    />
  );
};

but i got this:

Object is of type 'unknown'.ts(2571)

so I'm having problems with which type to use for my const Theme, with useTheme

I know the problem is in declaring the type of the theme, but I have doubts about the correct way to solve this.

Answer 1

This is how I fixed it:

1. Create an emotion.d.ts file as instructed here. In my case the content is this:

import '@emotion/react';
    
declare module '@emotion/react' {
  export interface Theme {
    colors: {
      blue: string[];
      gray: string[];
      primary: string;
      secondary: string;
      background: string;
      white: string;
    };
    space: string[];
    border: { 
      radius: string; 
    };
  }
}

2. Make sure the file is under a folder that is being included by Typescript. In my case was the src folder.

My tsconfig.json looks like this:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["DOM"],
    "jsx": "preserve",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "jsxImportSource": "@emotion/react"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "public", ".cache", "gatsby*"]
}

The only configuration specific to Emotion was the jsxImportSource as specified here

And that's it.

Answer 2

I did it in the following way

const theme = {
  text: '#000000',
  backgroundColor: '#ff0000',
};

type Theme = typeof theme;

const GlobalStyle: React.FC = (props) => {
  const Theme = useTheme<Theme>();
  return (
    <Global
      styles={css`
        ...
      `}
    />
  );
};