Repository: material-ui
Issue: MUI's CSS TypeScript types are not assignable to re-exported Emotion functions
Labels: breaking change,typescript,package: styled-engine,package: styled-engine-sc

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Current behavior 😯

I am having problems with passing variables to the `keyframes` function.  I have boiled it down to the root issue which is 🤯

The `CSSInterpolation` type which is exported from `@mui/styled-engine` (and other `@mui` packages) is not assignable to the `CSSInterpolation` type which is exported from `@emotion/css`.

MUI's `keyframes` function is a re-export of Emotion's `keyframes` function, and it expects to be called with Emotion's version of `CSSInterpolation`.

This is an error:
```
import { CSSInterpolation, keyframes } from '@mui/styled-engine';

const arg: CSSInterpolation = {}

keyframes(arg);
```
```
  Overload 2 of 2, '(...args: CSSInterpolation[]): Keyframes', gave the following error.
    Argument of type 'CSSObject' is not assignable to parameter of type 'CSSInterpolation'.
      Type 'CSSObject' is not assignable to type 'Keyframes'.
        Type 'CSSObject' is missing the following properties from type '{ name: string; styles: string; anim: number; toString: () => string; }': name, styles, anim(2769)
```
[TS Playground Link](https://tsplay.dev/NDyAxm)

But this is fine:
```
import { keyframes } from '@mui/styled-engine';
import { CSSInterpolation } from '@emotion/css';

const arg: CSSInterpolation = {}

keyframes(arg);
```
[TS Playground Link](https://tsplay.dev/mZ4JEw)

It does not matter whether `keyframes` is exported from `@emotion/css` or `@mui/styled-engine` -- both will work with the Emotion version of `CSSInterpolation` and not the MUI version.

The [MUI TypeScript types](https://github.com/mui/material-ui/blob/master/packages/mui-styled-engine/src/index.d.ts) look identical to the [Emotion types](https://github.com/emotion-js/emotion/blob/main/packages/serialize/types/index.d.ts). I'm not seeing a problem in the types themselves.  But I don't quite understand why MUI re-defines the types rather than re-exporting them.

### Expected behavior 🤔

The MUI `CSSInterpolation` type should be assignable to the MUI `keyframes` function.

### Steps to reproduce 🕹

A minimal reproducible example can be seen in the [TS Playground Link](https://tsplay.dev/NDyAxm) explained above.

### Context 🔦

I am trying to create a function that takes some arguments and returns a keyframes object.  I am struggling to define the types correctly such that what I pass to `keyframes` has the correct type.  These are my failed attempts:

```
import { CSSObject, Keyframes, keyframes } from '@mui/styled-engine';

const createKeyframes = (start: CSSObject, end: CSSObject): Keyframes => {
  return keyframes({
    '0%': start,
    '50%': end,
    '100%': start
  })
};
```
```
Overload 2 of 2, '(...args: CSSInterpolation[]): Keyframes', gave the following error.
    Argument of type '{ '0%': CSSObject; '50%': CSSObject; '100%': CSSObject; }' is not assignable to parameter of type 'CSSInterpolation'.
      Types of property ''0%'' are incompatible.
        Type 'CSSObject' is not assignable to type 'CSSInterpolation'.
          Type 'CSSObject' is not assignable to type 'Keyframes'.
            Type 'CSSObject' is missing the following properties from type '{ name: string; styles: string; anim: number; toString: () => string; }': name, styles, anim(2769)
```
[TS Playground Link](https://tsplay.dev/wEPpkW)

```
import { CSSProperties } from 'react';
import { Keyframes, keyframes } from '@mui/styled-engine';

const createKeyframes = (start: CSSProperties, end: CSSProperties): Keyframes => {
  return keyframes({
    '0%': start,
    '50%': end,
    '100%': start
  })
};
```
```
Overload 2 of 2, '(...args: CSSInterpolation[]): Keyframes', gave the following error.
    Argument of type '{ '0%': CSSProperties; '50%': CSSProperties; '100%': CSSProperties; }' is not assignable to parameter of type 'CSSInterpolation'.
      Types of property ''0%'' are incompatible.
        Type 'CSSProperties' is not assignable to type 'CSSInterpolation'.
          Type 'Properties<string | number, string & {}>' is not assignable to type 'CSSObject'.
            Index signature for type 'string' is missing in type 'Properties<string | number, string & {}>'.(2769)
```
[TS Playground Link](https://tsplay.dev/m04vam)

I have figured out how to avoid the error by importing `CSSObject` from Emotion, but I am raising this issue because this feels like a bug which should be fixed on the MUI end.

### Your environment 🌎

TS Playground using the default configuration (strict everything).