Not Able To Align The Material Ui Components From Right To Left

Hi I have a website that supports both English and Arabic I want to align the MUI text fields and dropdowns from right to left direction mainly the label of the text filed and the

Solution 1:

You have to install additional plugin (stylis-plugin-rtl for MUI v5 or jss-rtl for MUI v4 ) and place it inside your <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