How to use emotion/styled with React and Typescript

user_2114052 0
Viewed 2221

I have wrapped my root component in ThemeProvider from @emotion/react which gives me access to props.theme as such:

const StyledDiv = styled.div`
  background-color: ${(props) => props.theme.palette.primary.main};
`;

Problem: props.theme is an empty object according to TS - palette does not exist on the Theme type (however the object I am passing to the theme provider does contain that attribute). If I make TS ignore this, the code works.

The docs cover this and it seems like an easy fix: Extend the Emotion theme type

However I do not understand the docs well enough to make the Theme type of props.theme have the correct attributes.

Any help that points me in the right direction is much appreciated!

emotion typescript reactjs
1 Answers

Add this file types.d.ts

import "@emotion/react";
import { IPalette } from "../your-palette";

declare module "@emotion/react" {
  export interface Theme extends IPalette {}
}
user_100681940
Related