Utilize the useTheme type from Emotion Js within ReactJs using Typescript

Question

Utilize the useTheme type from Emotion Js within ReactJs using Typescript

Greetings! As a newcomer to typescript, I find myself with a query regarding the use of Theme in emotionJs. Here's the snippet of code that has been causing me some trouble:

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');

        /* Rest of the CSS properties */

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

Unfortunately, when running this code, I encountered the following error:

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

This issue seems to stem from the uncertainty around declaring the type for my constant Theme while using useTheme.

I am aware that specifying the type for the theme variable is where the problem lies, but I'm uncertain about the correct approach to resolve this dilemma. Any guidance on this matter would be greatly appreciated!

typescript emotion

Answer 1

Answer №1

Here's the solution I implemented:

To address the issue, I created an emotion.d.ts file following the instructions provided here. The content of my file looks like 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; 
    };
  }
}

I ensured that the file was located in a folder included by Typescript, which for me was the src folder.

This is how my tsconfig.json file is set up:

{
  "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 Emotion-specific configuration I had to make was setting jsxImportSource as outlined here.

And that's all there was to it!

Answer 2

Here's the solution I implemented:

To address the issue, I created an emotion.d.ts file following the instructions provided here. The content of my file looks like 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; 
    };
  }
}

I ensured that the file was located in a folder included by Typescript, which for me was the src folder.

This is how my tsconfig.json file is set up:

{
  "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 Emotion-specific configuration I had to make was setting jsxImportSource as outlined here.

And that's all there was to it!

Answer 3

Answer №2

This is how I accomplished it:

const design = {
  fontColor: '#000000',
  background: '#ff0000',
};

type DesignType = typeof design;

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

Answer 4

This is how I accomplished it:

const design = {
  fontColor: '#000000',
  background: '#ff0000',
};

type DesignType = typeof design;

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

Utilize the useTheme type from Emotion Js within ReactJs using Typescript

Answer №1

Answer №2

Similar questions

Discovering the current page using ons-navigator in Onsen UI

Facing a problem with querying interfaces and types in TypeScript

Unable to loop through using ngFor

Is there a way to retrieve all potential string literals from an Array<>?

Having trouble with the onChange function within the rc-field-form wrapper

The paths configuration in tsconfig.json is not functioning as anticipated

Is it possible to conceal a table element using [hidden] in Angular 2?

Resolving the problem of <Link> error in React with Typescript using react-router-dom

order by truthiness

Type-constrained generic key access for enhanced security

Struggling with getting render props to work in Next.js version 13

Is it possible to view the list of errors displayed by vscode when opening a JS file exclusively through the terminal?

The object's null status remains uncertain even after being checked for null

Protractor for Angular 2: Pausing execution until specified element obtains a specified class

Sending parameters in GraphQL with Typescript results in an empty set of curly braces being returned

The child component stays consistent across all Angular routing configurations

Leveraging Typescript in Firebase Cloud Functions to effectively work with intricate interfaces

Entering the appropriate value into an object's property accurately

I am looking to extract only the alphanumeric string that represents the Id from a MongoDB query

Error: Unable to locate the reference for "foo" while utilizing TypeScript in combination with Webpack