无法从右到左对齐 material ui 组件

Not able to align the material ui components from right to left

您好,我有一个同时支持英语和阿拉伯语的网站,我想从右到左对齐 MUI 文本字段和下拉菜单,主要是文本字段的标签和下拉菜单的样式不正确。我正在使用下面列出的主题。

const theme = createTheme({
    palette: {
      primary: {
        main: blue[500],
        light: blue[100],
        dark: blue[700]
      },
      secondary: {
        main: blue[300]
      },
      success: {
        main: green[400]
      }
    },
    typography: {
      "fontFamily": "Poppins",
    },
    overrides: {
      MuiTypography: {
        color: '#787878'
      },
      '& *': {
        fontFamily: "Poppins",
      },
    },
    direction: state.theme.direction,
  })

App.js 中,我返回的组件是

<div>
 <ThemeProvider theme={theme}>
   {myComponentCode}
 </ThemeProvider>
</div>

我还想提一下,它适用于 Firefox,但不适用于 Google Chrome。

它没有将文本字段标签正确地放置在 Chrome 上,我希望它位于右上角,后面为空 space。

您必须安装额外的插件(stylis-plugin-rtl for MUI v5 or jss-rtl for MUI v4)并将其放入您的 <ThemeProvider>:

MUI v5:

import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

const cacheRtl = createCache({
  key: "muirtl",
  stylisPlugins: [rtlPlugin]
});

...
return(
    <ThemeProvider theme={theme}>
      <CacheProvider value={cacheRtl}>
          {children}
      </CacheProvider>
    </ThemeProvider>
)

Material UI v4

import { create } from 'jss';
import rtl from 'jss-rtl';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

...
  return (
  <ThemeProvider theme={theme}>
    <StylesProvider jss={jss}>
      {children}
    </StylesProvider>
  </ThemeProvider>
  );

Working DEMO

Full guide MUI v5

Full guide Material UI v4