如何覆盖小吃店通知 DropZoneArea 的默认位置答案

【问题标题】：How to override default location of snackbar notification DropZoneArea如何覆盖小吃店通知 DropZoneArea 的默认位置
【发布时间】：2020-12-21 10:15:35
【问题描述】：

我正在尝试将材料 ui DropZone 中的快餐栏的默认位置更改为底部中心。快餐栏通知的默认位置在垂直原点是 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;

【问题讨论】：

标签： reactjs material-ui dropzone

【解决方案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' }}}
  />

【讨论】：

很遗憾，语法无效。
需要传递一个对象给alertSnackbarProps，已修复