React Material-UI Cookbook

How it works...

The two radio button groups in this example are only used to illustrate the different position value combinations that are available. In a real application where you show snackbars, you wouldn't have the configurable state to change the positioning of your snackbars. Instead, you should think of a value passed to the anchorOrigin property as a configuration value that is set once during startup.

It isn't good to rely on state values, as is the case in this example:

<Snackbar  anchorOrigin={{    vertical,    horizontal  }}  open={true}  message="Positioned Snackbar"/>

Instead, you would set the anchorOrigin values statically:

<Snackbar  anchorOrigin={{    vertical: 'top'    horizontal: 'right'  }}  open={true}  message="Positioned Snackbar"/> ...