43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import { prefixer } from 'stylis';
|
||
|
|
import rtlPlugin from '@mui/stylis-plugin-rtl';
|
||
|
|
import { StyleSheetManager } from 'styled-components';
|
||
|
|
import { CacheProvider } from '@emotion/react';
|
||
|
|
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||
|
|
import createCache from '@emotion/cache';
|
||
|
|
import Snackbar from '@mui/material/Snackbar';
|
||
|
|
|
||
|
|
// Create rtl cache
|
||
|
|
const cacheRtl = createCache({
|
||
|
|
key: 'muirtl',
|
||
|
|
stylisPlugins: [prefixer, rtlPlugin],
|
||
|
|
});
|
||
|
|
|
||
|
|
const theme = createTheme({ direction: 'rtl' });
|
||
|
|
|
||
|
|
export default function PositionedSnackbar() {
|
||
|
|
return (
|
||
|
|
<StyleSheetManager stylisPlugins={[rtlPlugin]}>
|
||
|
|
<CacheProvider value={cacheRtl}>
|
||
|
|
<ThemeProvider theme={theme}>
|
||
|
|
<Box dir="rtl" sx={{ width: window?.innerWidth, height: '100vh' }}>
|
||
|
|
<Snackbar
|
||
|
|
key="left"
|
||
|
|
anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
|
||
|
|
message="Snackbar should show right (RTL)"
|
||
|
|
open
|
||
|
|
/>
|
||
|
|
<Snackbar
|
||
|
|
key="right"
|
||
|
|
anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
|
||
|
|
message="Snackbar should show left (RTL)"
|
||
|
|
open
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
</ThemeProvider>
|
||
|
|
</CacheProvider>
|
||
|
|
</StyleSheetManager>
|
||
|
|
);
|
||
|
|
}
|