在实现带有情感的 Material-UI 的 RTL 支持时出现 TypeScript 问题

问：

我正在尝试使用 material-ui 在项目中实现 rtl 支持，如此处所述。我的问题在阶段 4.1。我正在尝试创建一个使用 stylis-plugin-rtl 的新缓存实例。文档中提供的示例是javascript，我正在尝试将其移植到打字稿中。我有两个问题。首先，我尝试将 stylis 插件传递给 createCache 函数，但我收到此错误：

Type '(element: Element, index: number, children: Element[], callback: Middleware) => string | void' is not assignable to type 'Plugin'.
  Types of parameters 'element' and 'context' are incompatible.
    Type 'import("/home/ehsun/Desktop/volkswagen/packages/swiss-army-knife/node_modules/@emotion/stylis/types/index").Context' is not assignable to type 'Element'.ts(2322)

我像这样绕过：

const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [
    (prefixer as unknown) as StylisPlugin,
    (rtlPlugin as unknown) as StylisPlugin,
  ],
});

第二个问题是 CacheProvider 组件在创建的缓存类型上有问题，并给出以下警告：

Property 'insert' is missing in type 'import("/node_modules/@emotion/utils/types/index").EmotionCache' but required in type 'import("/node_modules/@emotion/react/node_modules/@emotion/utils/types/index").EmotionCache'.ts(2741)
index.d.ts(26, 3): 'insert' is declared here.
index.d.ts(338, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<EmotionCache>'

我通过将缓存转换为任何来绕过它

<CacheProvider value={cacheRtl as any}>{children}</CacheProvider>

我觉得这两种解决方案都是错误的/不兼容的，而且我对打字稿有点缺乏经验，所以我很想知道你们是否有更好的主意。提前致谢。