Material-UI V5 RTL with stylis-plugin-rtl

Question

i am useing Material UI 5 with next.js and have implemenmted every steps exactly like the documentation here with emotion and stylis-plugin-rtl v2: https://next.material-ui.com/guides/right-to-left/#heading-jss but after refreshing page my label in input jumping to left and by clicking goes right and in outlined mode label placement in border is ltr can anyone help?

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

I think you should detect when your app is in RTL mode, then handle the createCache options like this:

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