Action placement in RTL mode #607
Description
Expected Behavior
In RTL mode the actions needs to be aligned to the left
Current Behavior
Here's the code:
const theme = createTheme({
direction: 'rtl',
typography: {
fontFamily: IranSansFont.style.fontFamily,
},
})
const MUIProvider: FC<PropsWithChildren> = ({ children }) => {
return (
<body className={IranSansFont.className} dir="rtl">
<AppRouterCacheProvider
options={{
key: 'muirtl',
stylisPlugins: [stylisRTLPlugin],
}}
>
<ThemeProvider theme={theme}>
<SnackbarProvider
dense
preventDuplicate
anchorOrigin={{
vertical: 'top',
horizontal: 'center',
}}
action={(key) => (
<IconButton onClick={() => closeSnackbar(key)}>
<RiCloseLine color="white" />
</IconButton>
)}
>
{children}
</SnackbarProvider>
</ThemeProvider>
</AppRouterCacheProvider>
</body>
)
}Your Environment
"dependencies": {
"@emotion/cache": "^11.13.0",
"@emotion/react": "^11.13.0",
"@emotion/styled": "^11.13.0",
"@mui/material": "^5.16.4",
"@mui/material-nextjs": "^5.16.4",
"@remixicon/react": "^4.2.0",
"@tanstack/react-query": "^5.51.15",
"@tanstack/react-query-devtools": "^5.51.15",
"axios": "^1.7.2",
"next": "14.2.5",
"notistack": "^3.0.1",
"react": "^18",
"react-dom": "^18",
"recoil": "^0.7.7",
"recoil-persist": "^5.1.0",
"stylis": "^4.3.2",
"stylis-plugin-rtl": "^2.1.1"
}