0
196
ViewsNot 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 dropdowns are not styled properly. I am using the theme listed below.
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,
})
and in App.js my returned component is
<div>
<ThemeProvider theme={theme}>
{myComponentCode}
</ThemeProvider>
</div>
I also want to mention that it works fine for Firefox but not for Google Chrome.
It's not placing the text filed label correctly on Chrome, I want it at the top right with empty space at the back.
·
Juan Pablo Isaza
1 answers
Answer question0
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>
);
·
Juan Pablo Isaza
Report
Answer question