[Snackbar] horizontal positioning is not changing in RTL

[aaarichter]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The snackbar component is not changing its horizontal position when changing to the mui.com page to righ-to-left (RTL) direction. For example, the first snackbar example remains on the left side in both LTR and RTL, while the snackbar code says it should switch.

Expected behavior 🤔

The snackbar should change its horizontal positioning

Steps to reproduce 🕹

Steps:

1. go to https://mui.com/material-ui/react-snackbar/#main-content
2. open snackbar example
3. change page to right-to-left (RTL)
4. (if snackbar already closed, reopen it)

Using this repo locally, the bug shows as well. But when I deactivate the RTL code part in the snackbar component, the bug is resolved.

There seems to be a conflict between snackbar RTL code and stylis-plugin-rtl / @emotion/cache rewriting LTR styles

Context 🔦

In my local project, I'm using basically the same RTL provider setup as the mui.com page using stylis-plugin-rtl and @emotion/cache

import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import { useTheme } from '@mui/material/styles';
import { FunctionComponent } from 'react';
import { StyleSheetManager } from 'styled-components';
import { prefixer } from 'stylis';
import rtlPlugin from 'stylis-plugin-rtl';

const cacheLtr = createCache({ key: 'css', prepend: true });

// Cache for the rtl version of the styles
const cacheRtl = createCache({
  key: 'rtl',
  prepend: true,
  stylisPlugins: [prefixer, rtlPlugin],
});

export const StyledEngineProvider: FunctionComponent = ({ children }) => {
  const theme = useTheme();

  const emotionCache = theme.direction === 'rtl' ? cacheRtl : cacheLtr;

  return (
    <StyleSheetManager
      stylisPlugins={[
        // 😿 the StyleSheetManager types are incompatible with latest rtlPlugin but stuff works ✨👻
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        rtlPlugin,
      ]}
    >
      <CacheProvider value={emotionCache}>{children}</CacheProvider>
    </StyleSheetManager>
  );
};

export default StyledEngineProvider;

Your environment 🌎

`npx @mui/envinfo`

 System:
    OS: macOS 12.3.1
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Edge: Not Found
    Firefox: 99.0.1
    Safari: 15.4
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.80 
    @mui/codemod:  5.7.0 
    @mui/docs:  5.7.0 
    @mui/envinfo:  2.0.6 
    @mui/icons-material:  5.6.2 
    @mui/joy:  5.0.0-alpha.27 
    @mui/lab:  5.0.0-alpha.81 
    @mui/markdown:  5.0.0 
    @mui/material:  5.7.0 
    @mui/material-next:  6.0.0-alpha.35 
    @mui/private-classnames:  5.7.0 
    @mui/private-theming:  5.7.0 
    @mui/styled-engine:  5.7.0 
    @mui/styled-engine-sc:  5.7.0 
    @mui/styles:  5.7.0 
    @mui/system:  5.7.0 
    @mui/types:  7.1.3 
    @mui/utils:  5.7.0 
    @mui/x-data-grid:  5.8.0 
    @mui/x-data-grid-generator:  5.8.0 
    @mui/x-data-grid-pro:  5.8.0 
    @mui/x-date-pickers:  5.0.0-alpha.0 
    @mui/x-date-pickers-pro:  5.0.0-alpha.0 
    @mui/x-license-pro:  5.7.0 
    @types/react: ^17.0.44 => 17.0.44 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components:  5.3.5 
    typescript: ^4.6.4 => 4.6.4