Как увеличить размеры области размещения filepond в React.js?

Question

У меня есть компонент FilePond, используемый для загрузки файлов в моем приложении React со следующей реализацией:

~~~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>

~~~

Этот код отображает красивый компонент , позволяющий пользователям загружать свои файлы.

Однако я бы хотел увеличить (отредактировать ширину и высоту) этот компонент, взятый из https://pqina.nl/filepond/. К сожалению, мне кажется, что я могу найти способ сделать это, может кто-нибудь помочь мне?

Answer 1

В своей документации они рекомендуют переопределить свои стили .Таким образом, вы можете сделать то же самое, просто отрегулируйте высоту всего, что вам нужно.

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

Смотрите вживую!