diff --git a/docs/pages/api-docs/snackbar.md b/docs/pages/api-docs/snackbar.md
index 9be38de8619a06..14e43189bbd0f7 100644
--- a/docs/pages/api-docs/snackbar.md
+++ b/docs/pages/api-docs/snackbar.md
@@ -29,7 +29,7 @@ The `MuiSnackbar` name can be used for providing [default props](/customization/
| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| action | node | | The action to display. It renders after the message, at the end of the snackbar. |
-| anchorOrigin | { horizontal: 'center' | 'left' | 'right', vertical: 'bottom' | 'top' } | { vertical: 'bottom', horizontal: 'center' } | The anchor of the `Snackbar`. |
+| anchorOrigin | { horizontal: 'center' | 'left' | 'right', vertical: 'bottom' | 'top' } | { vertical: 'bottom', horizontal: 'left' } | The anchor of the `Snackbar`. On smaller screens, the component grows to occupy all the available width, the horizontal alignment is ignored. |
| autoHideDuration | number | null | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. |
| children | element | | Replace the `SnackbarContent` component. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js
index a666ab6f4f34fe..7b080a97b0ab5f 100644
--- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js
+++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js
@@ -50,10 +50,6 @@ export default function ConsecutiveSnackbars() {
Show message B
+
+
+
+
+
+ );
+
return (
);
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index da9a714324b48d..164f32ee3b370d 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -118,6 +118,17 @@ This change affects almost all components where you're using the `component` pro
+ {}} />
```
+### Snackbar
+
+- The notification now displays at the bottom left on large screens.
+ It better matches the behavior of Gmail, Google Keep, material.io, etc.
+ You can restore the previous behavior with:
+
+ ```diff
+ -
+ +
+ ```
+
### TablePagination
- The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop. This increases consistency with the `Pagination` component.
diff --git a/packages/material-ui/src/Snackbar/Snackbar.d.ts b/packages/material-ui/src/Snackbar/Snackbar.d.ts
index 6d14b4727782f3..3b130180f89e81 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.d.ts
+++ b/packages/material-ui/src/Snackbar/Snackbar.d.ts
@@ -22,6 +22,8 @@ export interface SnackbarProps
action?: SnackbarContentProps['action'];
/**
* The anchor of the `Snackbar`.
+ * On smaller screens, the component grows to occupy all the available width,
+ * the horizontal alignment is ignored.
*/
anchorOrigin?: SnackbarOrigin;
/**
diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index 51e93c0e5ad30f..fab21c1d2eb9e8 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -98,7 +98,7 @@ export const styles = (theme) => {
const Snackbar = React.forwardRef(function Snackbar(props, ref) {
const {
action,
- anchorOrigin: { vertical, horizontal } = { vertical: 'bottom', horizontal: 'center' },
+ anchorOrigin: { vertical, horizontal } = { vertical: 'bottom', horizontal: 'left' },
autoHideDuration = null,
children,
classes,
@@ -262,6 +262,8 @@ Snackbar.propTypes = {
action: PropTypes.node,
/**
* The anchor of the `Snackbar`.
+ * On smaller screens, the component grows to occupy all the available width,
+ * the horizontal alignment is ignored.
*/
anchorOrigin: PropTypes.shape({
horizontal: PropTypes.oneOf(['center', 'left', 'right']).isRequired,