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(
    <ThemeProvidertheme={theme}><CacheProvidervalue={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 JSSconst jss = create({ plugins: [...jssPreset().plugins, rtl()] });

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

Working DEMO

Full guide MUI v5

Full guide Material UI v4