In my nextjs project using the MUI library, I am working on incorporating multiple languages and setting the direction of the body element based on the locale.
const App = (props: MyAppProps) => {
const {
Component,
emotionCache = clientSideEmotionCache,
pageProps,
} = props;
const router = useRouter()
const { locale } = router;
return (
<CacheProvider value={emotionCache}>
<ThemeProvider theme={getTheme(theme)}>
<CssBaseline />
<GlobalStyles styles={{
body:{
backgroundColor:getTheme(theme).palette.Background.background,
direction:locale==="fa"?"rtl":"ltr"
}
}}/>
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
};
While this method works well with the text-align property, I'm facing issues with positioning elements due to the lack of start and end properties. For instance:
width:50px;
height:50px;
position: relative;
left:2px;
When positioning an element as shown above, I want it to be positioned 2px from the left in RTL languages like Persian and 2px from the right in LTR languages like English. The typical solution would involve using start and end properties, but CSS does not provide such options in the position property. So, my question is how can I effectively position elements based on start and end directions?