如何设置 Material UI DropzoneArea 预览项的大小

如何解决如何设置 Material UI DropzoneArea 预览项的大小

我正在尝试对我的 MUI DropzoneArea 进行一点自定义，但我无法解决问题。正如您在图片上看到的，预览网格由三个元素组成：容器（红色）项目（蓝色）和图像。 我设法为这些元素设置了一些自定义背景值，但我希望看起来像填充/边距的项目（蓝色方块）更少，并且其中的图像更大。我试图为项目和图像设置边距、填充、宽度、高度，但没有任何反应。我究竟做错了什么？提前致谢。

我的代码：

 <div className={classes.mainClass}>
        <DropzoneArea
            acceptedFiles={['image/*']}
            onChange={handleChange}
            showFileNames
            dropzoneText="Upload your images please"
            showAlerts={true}
            filesLimit={6}
            dropzoneClass={classes.myDropZone}
            showFileNamesInPreview  = {true}
            previewGridClasses = {{container:classes.test1,item: classes.test2,image: classes.test3}}
        />
      </div>

export default makeStyles((theme) => ({
 myDropZone: {
        position: 'relative',width: '50%',height: '100%',// minHeight: '400px',// backgroundColor: '#F0F0F0',// border: 'dashed',// borderColor: '#C8C8C8',// cursor: 'pointer',// boxSizing: 'border-box',},test1:{
        display: 'flex',flexDirection: 'row',alignItems: 'center',backgroundColor:'#FF0000',justifyContent:'center',test2:{
        backgroundColor:'#23C5CA',objectFit:'cover',width:'50%',height:'10%'
    },test3: {
        objectFit:'cover',color:'#A2CA23',backgroundColor:'#A2CA23',padding:'0px',margin:'0px',border:'0px',}
}))
```

解决方法

你可以使用

     <DropzoneArea
         dropzoneClass={classes.dropZone}  // for drop zone container style your height... here
         dropzoneParagraphClass={classes.dropZoneText}  // for the paragraph style
         previewGridClasses={{
             item: classes.preview,}}
        ...
      />