Positioning snackbars

Material-UI Snackbar components have an anchorOrigin property that allows you to change the position of the snackbar when it's displayed. You might be fine using the default positioning of snackbars, but sometimes you'll need this level of customization to stay consistent with other parts of your application.

How to do it...

While you can't arbitrarily position snackbars on the screen, there are a number of options that allow you to change the position of the snackbar. Here's some code that allows you to play around with the anchorOrigin property values:

import React, { Fragment, useState } from 'react';

import { makeStyles } from '@material-ui/styles';
import Snackbar...