如何在 React.js 中增加 filepond 落水区的尺寸？

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>

~~~

此代码呈现 a nice looking component 让用户上传他们的文件。

但是我想放大（编辑宽度和高度）这个取自 https://pqina.nl/filepond/ 的组件。不幸的是，我似乎可以找到一种方法，有人可以帮助我吗？

Answer 1

在他们的文档中 recommend overriding their styles。所以你也可以这样做，只要调整你需要的高度即可。

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

如何在 React.js 中增加 filepond 落水区的尺寸？

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

reactjs

filepond

See it live!