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.

rpatel · Accepted Answer · 2022-07-27 17:48:09Z

This is how I fixed it:

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; 
    };
  }
}

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.

Alexander Schwarzmann · Accepted Answer · 2020-07-19 18:46:02Z

0

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`
        ...
      `}
    />
  );
};

answered Jul 19, 2020 at 18:46

Alexander Schwarzmann

1,6391 gold badge13 silver badges18 bronze badges

2 Comments

Reza Hosseini Over a year ago

for me useTheme accepts no argument. Are you still able to do this? Isn't there any other approaches?

Victor Ofoegbu Over a year ago

Very true @RezaHosseini. useTheme does not accept arguments anymore. But here's what I did tsx const theme = useTheme() as ThemeProps Where ThemeProps is the type of my theme. Hope this helps.

Collectives™ on Stack Overflow

ReactJs Typescript, Emotion Js useTheme type

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related