[GlobalStyles] styles type is probably too wide

[eps1lon]

Follow-up to #25191

Current Behavior 😯

<GlobalStyles styles={false} /> is accepted

Expected Behavior 🤔

It's unclear what this is supposed to do. https://next--material-ui.netlify.app/customization/how-to-customize/#5-global-css-override only documents an object.

The documented type in the API is probably too wide. Either we restrict it or we add tests for each overload.

[mnajdova]

I've took a look on this. The typings comes from emotion's Global component's props - more specifically from the InterpolationPrimitive We could restrict them, but that would mean that we would diverge from the original typings. Happy to do that if we agree it's better.

[eps1lon]

We could restrict them, but that would mean that we would diverge from the original typings.

Are we even sure that is the correct type in this place? Where is this type used in emotion and are we using it the same way? If these are equal then I'm referring back to "It's unclear what this is supposed to do.". Which may be an upstream issue.

[oliviertassinari]

It looks like an upstream issue, we could report it back.

From a type perspective, would this improve them? It won't fix the issue but maybe make them more accurate, not sure

diff --git a/packages/material-ui-styled-engine/src/GlobalStyles/GlobalStyles.d.ts b/packages/material-ui-styled-engine/src/GlobalStyles/GlobalStyles.d.ts
index 70fc40831a..4458bd817c 100644
--- a/packages/material-ui-styled-engine/src/GlobalStyles/GlobalStyles.d.ts
+++ b/packages/material-ui-styled-engine/src/GlobalStyles/GlobalStyles.d.ts
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Interpolation } from '@emotion/styled';
+import { GlobalProps } from '@emotion/react';

 export interface GlobalStylesProps {
   defaultTheme?: object;
-  styles: Interpolation<any>;
+  styles: GlobalProps['styles'];
 }

 export default function GlobalStyles(props: GlobalStylesProps): React.ReactElement;