classes prop not working with emotion css.

[feluxe]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

In the docs it says:

Emotion's css() method works seamlessly with Material-UI.

But when I try this:

/** @jsx jsx */ jsx;
import { jsx, css } from "@emotion/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: css`
    display: none;
  `
});

The code (TypeScript) won't compile. I get this error:

[ error ] ERROR in /home/felix/dev_projects/mewo.dev/schuemeyer2/schuemeyer/pages/index.tsx
82:30 Argument of type '{ root: SerializedStyles; }' is not assignable to parameter of type 'Styles<Theme, {}, "root">'.
  Type '{ root: SerializedStyles; }' is not assignable to type 'Record<"root", CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)>'.
    Types of property 'root' are incompatible.
      Type 'SerializedStyles' is not assignable to type 'CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)'.
        Type 'SerializedStyles' is not assignable to type 'CreateCSSProperties<{}>'.
          Index signature is missing in type 'SerializedStyles'.
    80 | `;
    81 | 
  > 82 | const useStyles = makeStyles({
       |                              ^
    83 |   root: css`
    84 |     display: none;
    85 | 

Expected Behavior 🤔

makeStyles() and emotion's css method should work together.

Steps to Reproduce 🕹

See the use of makeStyles() in this code sandbox (It should highlight the error in the editor):

https://codesandbox.io/s/emotion-typescript-example-v03mj?fontsize=14

Context 🔦

I'm trying to find out if we could use mui for our projects that use emotion for styling, but I'm stuck with this issue.

Is there maybe a plugin or something that I have missed to get emotion and mui work seamlessly together?

Your Environment 🌎

Tech	Version
Material-UI	4.3.3
React	16.9.0
Browser	Firefox
TypeScript	3.5.3
"@emotion/core"	10.0.16

[oliviertassinari]

I'm trying to find out if we could use mui for our projects that use emotion for styling, but I'm stuck with this issue.

@feluxe See https://material-ui.com/guides/interoperability/#emotion

[feluxe]

@oliviertassinari Thanks for your reply, but I already saw the page that you linked to, I have actually quoted it above ;-) The given example doesn't solve the issue that I have.

To put it simple:

I know that this works:

<Tabs css={css`padding: 5px;`} ...

But how do I use emotion with the classes prop, e.g.:

<Tabs classes={{ root: ???, indicator: ??? }} ...

I tried with makeStyles (see code example and codesandbox above), without luck.

[oliviertassinari]

Maybe you don't need to use the classes API, what about the global class names?

[feluxe]

I'm not sure if it would suffice. I'll see if there is a way to transform the css method result into something that can be passed to the classes prop.

[oliviertassinari]

@feluxe I don't think that it's possible. I would personally use the global class names, like .MuiTabs-indicator in your example, or provide tokens, e.g. indicator to the classes keys.

[defusioner]

@feluxe Have you found what you've being searching for?

[feluxe]

@defusioner I didn't have the time to dig deeper into the issue. We decided not to use mui for now, because we have a lot of code that uses emotion already.

[oliviertassinari]

@defusioner You can target the global class names. e.g.

<Button
  css={css`
    background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
    border-radius: 3px;
    border: 0;
    color: white;
    height: 48px;
    padding: 0 30px;
    box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
    & .MuiButton-label {
      color: papayawhip;
    }
  `}
>
  Emotion
</Button>

[defusioner]

@defusioner I didn't have the time to dig deeper into the issue. We decided not to use mui for now, because we have a lot of code that uses emotion already.

I've started to use emotion with @emotion/react package which provides css and jsx functions, but got blocked with mui classes override in the runtime (not theme). I've looked through and finally I'm using emotion basic package which provides both css and cx (classnames emotion helper).

So finally I create a Component.css.js file that exports styles using styled-components-like syntax and then I simply use them inside the component with cx.

[oliviertassinari]

@defusioner Does the emotion package correspond to a deprecated older version of the library? It should be working with the latest version. We have a demo in the documentation.
https://material-ui.com/guides/interoperability/#emotion

[defusioner]

@oliviertassinari I'm speaking about https://www.npmjs.com/package/emotion package that is the agnostic version of emotion library. This is the latest one (10.x as all others).

What is missing in the doc, is this example (passing an emotion class to the mui component):

import { css, cx } from 'emotion'

const noWrap = css`
  ...styles
`

const conditionalClass = css`
  ...styles
`

<Tooltip
      title={helpText}
      placement={placement}
      enterTouchDelay={0}
      leaveTouchDelay={3000}
      classes={{
        popper: cx(noWrap),
        tooltip: cx({ [conditionalClass]: condition })
      }}
    >
...
</Tooltip>

[oliviertassinari]

@defusioner Thanks for the link, so it's not deprecated! The Tooltip case is interesting, as the tooltip escape the parent hierarchy (it renders with the body as a parent). This makes the usage of the css prop a challenge. We document a workaround with the styled API: https://material-ui.com/guides/interoperability/#portals (it works as well with emotion).

In the case of @feluxe, it's much simpler, the tab children can be accessed with child CSS selectors (.MuiTabs-root, .MuiTabs-indicator).

[defusioner]

@oliviertassinari I like much the approach of separating css-in-js "classes" into a separate file. I also find styled components approach of "decorating" components not brilliant in the way the final code looks like.

I've liked the approach of this cx(css) usage because it keeps component's tree clean and is usable naturally as if there was no css-in-js.

[rickstaa]

@oliviertassinari Thanks a lot for your example it works perfectly! For future reference, a code sandbox with this example can be found https://codesandbox.io/s/emotion-material-ui-global-css-example-pm8fx