Theme interoperability with styled-components and emotion

[miloofcroton]

Here is the type:

export interface CSSProperties extends BaseCSSProperties {
  // Allow pseudo selectors and media queries
  // `unknown` is used since TS does not allow assigning an interface without
  // an index signature to one with an index signature. This is to allow type safe
  // module augmentation.
  // Technically we want any key not typed in `BaseCSSProperties` to be of type
  // `CSSProperties` but this doesn't work. The index signature needs to cover
  // BaseCSSProperties as well. Usually you would use `BaseCSSProperties[keyof BaseCSSProperties]`
  // but this would not allow assigning React.CSSProperties to CSSProperties
  [k: string]: unknown | CSSProperties;
}

• 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 😯

When I try to spread something like theme.typography.h5 into an object that Emotion.js will consume, I get a type error.

Expected Behavior 🤔

Yes, I can pick off individual values fine, but I'd rather be able to use whole objects and spread them in.

Steps to Reproduce 🕹

Try to spread useTheme().typography.h5 into the css prop from Emotion.js.

https://codesandbox.io/s/funny-kepler-6u22j

Context 🔦

I use Material-UI for components and theming. I use Emotion for adding additional styles to Material-UI components and other components.

Sometimes, I want to use an entire useTheme().typography[key] set of styles to override something. For instance, I want a Typography component to have an h2 variant (have h2 in the dom, for semantic reasons), but I want it to have h5 styles for visual reasons.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.8
React	16.13.1
TypeScript	3.8.3
Emotion.js	10.0.28

[eps1lon]

That is expected. theme.typography.h2 can contain values that are incompatible with emotion.

[oliviertassinari]

can contain values that are incompatible with emotion.

@eps1lon Do you know which values are incompatible? The implementation seems to behave as expected. Maybe we have the leverage to adapt the types to make the integration seamless? (it would be great to resolve this problem for the style interoperability story of v5).

For instance, the JavaScript side of things seem to work perfectly with:

      <div
        css={{
          ...theme.typography.h5,
          [theme.breakpoints.up("xs")]: {
            color: "blue"
          }
        }}
      >
        I am a several values from material's theme
      </div>

https://codesandbox.io/s/elated-frost-11lpi

[eps1lon]

The implementation seems to behave as expected. Maybe we have the leverage to adapt the types to make the integration seamless?

I don't want to go back and forth on this. Please open an issue describing which theme styling properties should implement CSS properties and which implement JSS properties. We just went through this a few weeks ago (#19491, #19263)

[oliviertassinari]

This is interesting: the version of Material-UI that doesn't include #19263 seems to be free of the problem.

• v4.8.3: OK https://codesandbox.io/s/determined-carson-3x5r0
• v4.9.0: KO https://codesandbox.io/s/cocky-haslett-wykv9

Could it be a regression?

---

It seems that we have the same problem with styled-components: https://codesandbox.io/s/fancy-sea-18415.

const Div = styled("div")({
  ...myTheme.typography.h5,
  [myTheme.breakpoints.up("xs")]: {
    color: "blue"
  }
});

We just went through this a few weeks ago

@eps1lon From what I understand, the concern here is broader to the past effort on CSS properties vs JSS properties. I believe this issue adds Emotion CSS properties to the mix, and I propose to add Styled component CSS properties.

@miloofcroton Would you be able to dive deeper in the issue?

[miloofcroton]

There might be a sufficient workaround here... can I pass part of the theme object to something that spits out object style css? I don't want to use the className way of passing in styles, but I could simply spread the return of a Material-UI function into my css prop object.

I also have a similar issue with the toolbar mixin, as those links mentioned.

@oliviertassinari , what would you like to see from me to dive in deeper?

[eps1lon]

I have no idea why you would expect JSS to be interopable with emotion or styled-components. Would be nice if some thought would be put into this because it's an immense effort.

[oliviertassinari]

I'm happy to drop JSS support if it's required, as long as we can have a styled-components first support.

[miloofcroton]

I'm happy to drop JSS support if it's required, as long as we can have a styled-components first support.

I don't know what it would require from your end, but for the end user, this would be great I think. Do you know what percent of your users use the provided JSS stuff versus using 3rd party solutions for CSS? I would assume limiting the scope of your project and letting users consume it in myriad ways covers most users the best.