Syntax for using the material-UI theme with emotion.sh in Typescript

[rickstaa]

I'm currently switching from Material-UI v4 to v5. As a result, I also switched to using emotion.sh instead of JSS. I have to say I'm delighted with this styling library as it allows me to work with CSS as it was designed and makes my code cleaner 🚀 . I, however, encountered one problem when trying to translate one of my components to use emotion. This component contains a styled div that is styled based on colours defined in the material-theme. I use the solution given by @Andarist in #2252 to achieve this:

import {
  Theme as EmotionTheme
} from "@emotion/react/macro";
const ButtonStyle = (theme: EmotionTheme) => css`
  background: ${theme.palette.primary.main};
`;

I then use the Material-ui (The Emotion ThemeProvider is redundant in Material-UI v5) to forward the theme object to the CSS API. I then use the following code to style the material-ui button:

<Button css={ButtonStyle}>This is a regular button.</Button>

As can be seen in this sandbox this seems to work fine, but it keeps throwing typescript errors.

Type '(theme: EmotionTheme) => SerializedStyles' is not assignable to type 'Interpolation<Theme>'.
  Type '(theme: EmotionTheme) => SerializedStyles' is not assignable to type 'FunctionInterpolation<Theme>'.
    Types of parameters 'theme' and 'props' are incompatible.
      Type 'Theme' is missing the following properties from type 'Theme': shape, breakpoints, direction, mixins, and 6 more.ts(2322)

I think this has something to do with the CSS API not having the right type definition for the material-UI theme prop. I'm not sure if this is an emotion.sh related Type definition problem or a material-UI Type definition problem. I tried several typescript definitions for the CSS arrow function but I haven't been able to find the right one. I also tried using the UseTheme hook to forward the material-UI theme, which seems to work without any problems. As I would like to use the shorter syntax, I was wondering if somebody else has found the right typescript syntax that makes typescript happy. Thanks a lot in advance!

What I already tried

• I tried disabling the emotion Theme Provider. This, however, does not seem to solve the typescript error. ❌
• I tried the following interface. ❌

interface CssInputProps {
  theme: Theme;
  [prop: string]: any;
}

• I tried using the Interpolation type (while disabling macros). This gives me different typescript errors. ❌

const ButtonStyle = (theme: Interpolation<EmotionTheme>) => css`
  background: ${theme.palette.primary.main};
`;

• I tried using the any type. Which ofcourse also works. ✅

const ButtonStyle = (theme: any) => css`
    background: ${theme.palette.primary.main}; 
`;

• I also tried using SerializedStyles but this does not seem to work. ❌

const ButtonStyle = (theme: SerializedStyles) => css`
    background: ${theme.palette.primary.main};
`;

Code sandbox

Possible related issues

• [SUPPORT] Composing dynamic styles + Themes + Typescript #1670
• Components created with CreateStyled<Theme> type incorrectly expects a theme prop #1434
• Typescript support for theme when using css prop #1197

[rickstaa]

After more trial and error and stumbling across this page in the documentation I found a way to use the material-UI theme with the CSS API without using the UseTheme hook:

import {
  Theme as EmotionTheme
} from "@emotion/react/macro";
import {
  Theme as MaterialUITheme,
} from "@material-ui/core";

// Re-declare the emotion theme to have the properties of the MaterialUiTheme
declare module "@emotion/react" {
  export interface Theme extends MaterialUITheme {}
}

// Define the button css
const ButtonStyle = (theme: MaterialUITheme) => css`
  background: ${theme.palette.primary.main};
`;

An example of this solution and all the other possible solutions can be found in the code-sandbox. I'm still curious if this is the current recommended solution for using the material-UI theme with emotion V11 or a shorter way of achieving the desired result?

[rickstaa]

@imransilvake, I guess you mean to ask when the css prop of emotion is available to be used with material-UI? This feature is available in material-UI V5. Although this version has not yet been released, you can already use it by installing the pre-release (see the material-ui documentation).

[imransilvake]

@rickstaa I recently did migrate from v4 to v5. But I can't use Theme type with css prop because I get missing the following properties from type 'Theme': shape, breakpoints, direction, mixins, and 6 more.ts(2322).
I think Material-UI needs to add the proper typings for this?

[rickstaa]

@imransilvake Mm I haven't seen that error in my project looks like the type definition is not defined. Are you sure that you use the module re-declaration as it is done in the CodeSandbox? If you still experience the error, could you maybe provide it with a small CodeSandbox so that we can check what goes wrong?

[imransilvake]

@rickstaa
This is what I want to ask that do I need to use module re-declaration in order to make MUI + emotion work? Isn't MUI should provide this out-of-the-box?

// 3. Use the material-ui theme inside the CSS api
// Re-declare the Emotion theme to the Material-ui theme
declare module "@emotion/react" {
  export interface Theme extends MaterialUITheme {}
}

[rickstaa]

@imransilvake That's correct. I was under the same impression when I first tried integrating emotion.sh with Material-UI. The comment by @Andarist cleared up my misunderstanding. The extra type declaration is needed since both emotion.sh (i.e. the css prop) and Material-UI use their own ThemeProvider. These theme providers are not aware of the structure of each other's Themes. We, therefore, need to re-declare or the emotion.sh theme to make it aware of the properties found in the Material-ui theme (see the emotion.sh documentation for more information). @Andarist Please correct me if I'm wrong.