How to override default location of snackbar notification DropZoneArea

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' }}}
  />