如何解决如何覆盖小吃店通知的默认位置 DropZoneArea
我正在尝试将材料 ui DropZone 中小吃店的默认位置更改为底部中心。
垂直原点的小吃栏通知的默认位置是底部,水平原点的默认位置是左。
任何建议或想法都会有所帮助。
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;
解决方法
您可以使用 alertSnackbarProps
将 props 传递给 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' }}}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。