How to increase dimensions of filepond drop area in React.js?

Question

I have a FilePond component used to upload files in my React App with the following implementation :

~~~React.js 

   render() {
    return (
        <div className="App">

           //Pass FilePond properties as attributes
          <FilePond
                      ref={ref => this.pond = ref}
                      files={this.state.files}
                      allowMultiple={false}
                      maxFiles={1}
                      onupdatefiles={(fileItems) => {
                         //add image to database 
                      }
            </FilePond>

~~~

This code renders a nice looking component to let users upload their files.

However I would like to scale up (edit width and height) this component taken from https://pqina.nl/filepond/. Unfortunately I can seem to find a way to do that, can someone please help me ?

Answer 1

On their documentation they recommend overriding their styles. So you can do the same, just adjust the height of whatever you need to.

.filepond--root,
.filepond--root .filepond--drop-label {
  height: 200px;
}

See it live!