[Snackbar] Fix hidden overlay blocking interactions regression

[MieleVL]

• [x ] I have followed (at least) the PR section of the contributing guide.

Fixes #25737

Preview: https://deploy-preview-25739--material-ui.netlify.app/components/snackbars/

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 0187f80

[oliviertassinari]

This is breaking the display on mobile:

Spec: https://material.io/components/snackbars

[mnajdova]

This is breaking the display on mobile

Then we can probably keep the { right: 8, left: 8 } and unset them under [theme.breakpoints.up('sm')] instead of completely removing them.

[mnajdova]

@MieleVL you would also need these changes

diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index 25ba683a1e..aa60de00eb 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -68,6 +68,8 @@ const SnackbarRoot = experimentalStyled(
     ...(styleProps.anchorOrigin.horizontal === 'left' && { justifyContent: 'flex-start' }),
     ...(styleProps.anchorOrigin.horizontal === 'right' && { justifyContent: 'flex-end' }),
     [theme.breakpoints.up('sm')]: {
+      right: 'unset',
+      left: 'unset',
       ...(styleProps.anchorOrigin.vertical === 'top' ? { top: 24 } : { bottom: 24 }),
       ...(styleProps.anchorOrigin.horizontal === 'center' && center),
       ...(styleProps.anchorOrigin.horizontal === 'left' && { left: 24, right: 'auto' }),

[oliviertassinari]

Since it's a regression from #25142, another alternative would be to add the CSS properties we changed in the PR. cc @m4theushw

[oliviertassinari]

If we want to restore the pre-migration to emotion effort (and fix the issue), it seems enough to apply this on HEAD:

diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index b71e6d535c..8903eb3d3a 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -56,8 +56,8 @@ const SnackbarRoot = experimentalStyled(
   const left = { justifyContent: 'flex-start' };
   const top3 = { top: 24 };
   const bottom3 = { bottom: 24 };
-  const right3 = { right: 24 };
-  const left3 = { left: 24 };
+  const right3 = { left: 'auto', right: 24 };
+  const left3 = { left: 24, right: 'auto' };
   const center = {
     left: '50%',
     right: 'auto',

which is almost the initial proposal (without the simplification, yes, we can remove the indirections 👍)

[mnajdova]

Thanks!

regression on mobile fixed