Search code examples
cssmaterial-uistylingdropzone

How to set the size of Material UI DropzoneArea Preview items

I'm trying to customize little bit my MUI DropzoneArea but I can't get through a problem. As you can see on the picture a preview grid is made of three elements: the container (red) item (blue) and the image. I managed to set some custom background values to these elements, but I want that the item (blue square) which looks like a padding/margin to be less and the image inside of this to be bigger. I tried to set margin,padding, width,height for the item and the image but nothing happens. What am I doing wrong? Thanks in advance. enter image description here

My code:

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

  • You can use

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