Question - how do you change the size of the drop area?

[jet11x]

Bug Report

Describe the bug

In a a form the large drop area takes up a lot of space - are the properties/CSS that can be used to reduce it. I looked at the source code and still wasn't sure on the best approach.

My familiarity with Material, React and for that matter CSS is limited so apologies if this sounds like a stupid question.

[panz3r]

Hi @jet11x ,

Thanks for your feedback, to customise the height of the DropzoneArea component you can use the Theme API of Material UI, like this

const useStyles = makeStyles({
  smDropzone: {
    minHeight: 50,
  },
});

function App() {
  const classes = useStyles();
  const [fileObjects, setFileObjects] = useState([]);
  
  return (        
        <DropzoneAreaBase
          fileObjects={fileObjects}
          onAdd={(newFileObjs) => {
            console.log('onAdd', newFileObjs);
            setFileObjects([].concat(fileObjects, newFileObjs));
          }}
          onDelete={(deleteFileObj) => {
            console.log('onDelete', deleteFileObj);
          }}
          classes={{
            root: classes.smDropzone,
          }}
        />
  );
}

[jet11x]

Brilliant - thanks your rapid reply and helping me with my Material/React question.