如何覆盖 snackbar 通知的默认位置 DropZoneArea

Question

我正在尝试将 material ui DropZone 中快餐栏的默认位置更改为底部中央。垂直原点的 snackbar 通知的默认位置是 Bottom，水平原点的默认位置是 Left。

任何建议或想法都会有所帮助。


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

您可以使用alertSnackbarProps将道具传递给DropzoneArea内的SnackBar。

使用 anchorOrigin 道具定位 Snackbar

喜欢

  <DropzoneArea
    acceptedFiles={SUPPORTED_FORMATS}
    maxFileSize={2000000}
    useChipsForPreview
    filesLimit={1}
    dropzoneText={text}
    onChange={onChange}
    classes={{ root: classes.dropZoneContainer }}
    alertSnackbarProps={{anchorOrigin:{ vertical: 'bottom', horizontal: 'center' }}}
  />

如何覆盖 snackbar 通知的默认位置 DropZoneArea

How to override default location of snackbar notification DropZoneArea

reactjs

material-ui

dropzone