[docs] Fix custom Snackbar width on mobile (#21948)

mui · Jul 26, 2020 · 557c4ad · 557c4ad
1 parent 7070a79
commit 557c4ad
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.js b/docs/src/pages/components/snackbars/CustomizedSnackbars.js
@@ -15,6 +15,9 @@ const useStyles = makeStyles((theme) => ({
       marginTop: theme.spacing(2),
     },
   },
+  alert: {
+    width: '100%',
+  },
 }));
 
 export default function CustomizedSnackbars() {
@@ -39,7 +42,11 @@ export default function CustomizedSnackbars() {
         Open success snackbar
       </Button>
       <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
-        <Alert onClose={handleClose} severity="success">
+        <Alert
+          onClose={handleClose}
+          severity="success"
+          className={classes.alert}
+        >
           This is a success message!
         </Alert>
       </Snackbar>

diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx b/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx
@@ -15,6 +15,9 @@ const useStyles = makeStyles((theme: Theme) => ({
       marginTop: theme.spacing(2),
     },
   },
+  alert: {
+    width: '100%',
+  },
 }));
 
 export default function CustomizedSnackbars() {
@@ -39,7 +42,11 @@ export default function CustomizedSnackbars() {
         Open success snackbar
       </Button>
       <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
-        <Alert onClose={handleClose} severity="success">
+        <Alert
+          onClose={handleClose}
+          severity="success"
+          className={classes.alert}
+        >
           This is a success message!
         </Alert>
       </Snackbar>