Javascript 在材质ui dropzone中设置预览网格的样式

在我的React应用程序中，我有一个书的表单页面，可以选择上传封面照片。我决定使用MaterialUIDropZone（），它非常有效，但我遇到了一个问题。当只允许一个文件时，预览看起来不是很好。

我希望它能居中，尽可能大，但我真的很挣扎。相关代码：

const useStyles = makeStyles(() => ({
  dropZone: {
    height: '100%',
    fullWidth: 'true',
  },
  previewContainer: {
    container: 'true',
    width: '100%',
    height: '100%',
  },
  preview: {
    //width: '100%',
    //height: '100%',
    //item: 'true',
    xs: '12',
  },
  previewImg: {
    //height: '100%',
    //width: '100%',
  },
}));

const classes = useStyles();

<DropzoneArea
   acceptedFiles={['image/*']}
   dropzoneClass={classes.dropZone}
   previewGridClasses={{
      container: classes.previewContainer,
      item: classes.preview,
      image: classes.previewImg,
   }}
   dropzoneText={'Upload book cover image'}
   filesLimit={1}
   onChange={(files) => formikProps.setFieldValue('coverImage', files)}
   showAlerts={false}
/>

const useStyles=makeStyles（（）=>({
dropZone：{
高度：“100%”，
全宽：“true”，
},
预览容器：{
容器：“true”，
宽度：“100%”，
高度：“100%”，
},
预览：{
//宽度：“100%”，
//高度：“100%”，
//项目：'true'，
xs:'12'，
},
预演：{
//高度：“100%”，
//宽度：“100%”，
},
}));
const classes=useStyles（）；
formikProps.setFieldValue（'coverImage'，files）}
showAlerts={false}
/>

---

我已经尝试了很多东西，但到目前为止，我唯一能获得实际视觉效果的方法就是在预览类中添加一些填充。非常感谢您的帮助。

我在仔细查看了组件的源代码后最终解决了这个问题，所以我想我会在这里发布解决方案，以防将来有人遇到这个问题。事实证明，dropzone组件实际上并没有将项目样式应用于图像（即使文档说应该如此）。我确实找到了解决这个问题的方法，您实际上可以为组件提供一个定制的GetPreviewWicon函数，并且可以在其中添加您的样式

              <DropzoneArea
                acceptedFiles={['image/*']}
                dropzoneClass={classes.dropZone}
                previewGridClasses={{
                  item: classes.preview,
                }}
                getPreviewIcon={(file) => {
                  if (file.file.type.split('/')[0] === 'image')
                    return (
                      <img className={classes.previewImg} role="presentation" src={file.data} />
                    );
                }}
                dropzoneText={'Upload book cover image'}
                filesLimit={1}
                onChange={(files) => formikProps.setFieldValue('coverImage', files[0])}
                showAlerts={false}
              />

{
if（file.file.type.split（'/'）[0]='image'）
返回(
);
}}
dropzoneText={'Upload book cover image'}
filesLimit={1}
onChange={（files）=>formikProps.setFieldValue（'coverImage'，files[0]）}
showAlerts={false}
/>