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

Question

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

我的代码：

 <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',
    }
}))
```

Answer 1

您可以使用

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

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

How to set the size of Material UI DropzoneArea Preview items

css

styling

material-ui

dropzone