0

我正在尝试在使用 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>'

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

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

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

4

0 回答 0