title: typescript problem in implementing rtl support for material-ui with emotion
body: <p>I am trying to implement rtl support in a project using material-ui, as described <a href="https://mui.com/guides/right-to-left/" rel="nofollow noreferrer">here</a>. my problem is in stage <a href="https://mui.com/guides/right-to-left/#4-load-the-rtl-plugin" rel="nofollow noreferrer">4.1</a>. I am trying to create a new cache instance that uses the stylis-plugin-rtl. the example povided in the documentation is in javascript &amp; I'm trying to port that into typescript. I have two problems. first, I am trying to pass stylis plugins to the createCache function but I get this error:</p>
  <pre><code>Type '(element: Element, index: number, children: Element[], callback: Middleware) =&gt; string | void' is not assignable to type 'Plugin'.
    Types of parameters 'element' and 'context' are incompatible.
      Type 'import(&quot;/home/ehsun/Desktop/volkswagen/packages/swiss-army-knife/node_modules/@emotion/stylis/types/index&quot;).Context' is not assignable to type 'Element'.ts(2322)
  </code></pre>
  <p>which I bypassed like this:</p>
  <pre><code>const cacheRtl = createCache({
    key: 'muirtl',
    stylisPlugins: [
      (prefixer as unknown) as StylisPlugin,
      (rtlPlugin as unknown) as StylisPlugin,
    ],
  });
  </code></pre>
  <p>the second problem is that the CacheProvider component has a problem with the type of the created cache &amp; gives this warning:</p>
  <pre><code>Property 'insert' is missing in type 'import(&quot;/node_modules/@emotion/utils/types/index&quot;).EmotionCache' but required in type 'import(&quot;/node_modules/@emotion/react/node_modules/@emotion/utils/types/index&quot;).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 &amp; ProviderProps&lt;EmotionCache&gt;'
  </code></pre>
  <p>which I bypassed by casting the cache as any</p>
  <pre><code>&lt;CacheProvider value={cacheRtl as any}&gt;{children}&lt;/CacheProvider&gt;
  </code></pre>
  <p>I feel like both solutions are wrong/incompelete, and a result of me being a bit inexperienced with typescript, so I would love to know if you people had a better idea. thanks in advance.</p>