How to override default location of snackbar notification DropZoneArea - reactjs

Question

I'm trying to change the default location of the snackbar in material ui DropZone to be at the bottom center.
The default location for the snackbar notification in vertical origin is Bottom and in the horizontal origin is Left.
Any suggestions or thoughts would be helpful.
import React from "react";
import { DropzoneArea } from "material-ui-dropzone";
import { makeStyles } from "#material-ui/core";
const useStyles = makeStyles((theme) => ({
dropZoneContainer: {
width: "100%",
minHeight: "0",
},
}));
const DropZone = ({ text, onChange, error }) => {
const classes = useStyles();
const SUPPORTED_FORMATS = [
"image/jpg",
"image/jpeg",
"image/gif",
"image/png",
];
return (
<React.Fragment>
<DropzoneArea
acceptedFiles={SUPPORTED_FORMATS}
maxFileSize={2000000}
useChipsForPreview
filesLimit={1}
dropzoneText={text}
onChange={onChange}
classes={{ root: classes.dropZoneContainer }}
/>
<label style={{ color: "black", fontSize: "0.9rem" }}>
Max size allowed is 2 MB
</label>
<small
className="form-text text-danger"
style={{ color: "red", fontSize: "0.8rem", fontWeight: "bold" }}
>
{error}
</small>
</React.Fragment>
);
};
export default DropZone;

Answer 1

You can use alertSnackbarProps to pass props to the SnackBar withinDropzoneArea.
Use the anchorOrigin prop to position Snackbar
like
<DropzoneArea
acceptedFiles={SUPPORTED_FORMATS}
maxFileSize={2000000}
useChipsForPreview
filesLimit={1}
dropzoneText={text}
onChange={onChange}
classes={{ root: classes.dropZoneContainer }}
alertSnackbarProps={{anchorOrigin:{ vertical: 'bottom', horizontal: 'center' }}}
/>