Theme interoperability with styled-components and emotion

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

[mnajdova]

Adding the v6 milestone. We can update the typings once we don’t support the JSS implementation anymore.

[mnajdova]

@oliviertassinari the typings were adjusted so they would work with the JSS utilities makeStyles, withStyles, as well as our styled() utility from @material-ui/core/styles. I wouldn’t simplify them until we support both APIs.

For emotion & styled-components it’s interesting, if I add additional styles and spread them it works - https://codesandbox.io/s/spring-wildflower-46plv?file=/src/index.tsx Will need to look into this.