Material-UI V5 RTL with stylis-plugin-rtl

Question

我将 Material UI 5 与 next.js 一起使用，并使用 emotion 和 stylis-plugin-rtl v2 实现了与此处文档完全相同的每个步骤: https://next.material-ui.com/guides/right-to-left/#heading-jss 但是在刷新页面后，我在输入中的标签跳到左边并通过单击向右移动并且在轮廓模式下边框中的标签放置是 ltr 谁能帮忙？

import rtlPlugin from 'stylis-plugin-rtl';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

// Create rtl cache
const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [rtlPlugin],
});

function RTL(props) {
  return <CacheProvider value={cacheRtl}>{props.children}</CacheProvider>;
}

Answer 1

我认为您应该检测您的应用何时处于 RTL 模式，然后像这样处理 createCache 选项:

const cacheRtl = createCache({
  key: isRTL ? 'muirtl' : 'muiltr',
  stylisPlugins: isRTL ? [rtlPlugin] : [],
});