如何使用react-drag-drop-files组件设置宽高？

不用急着换包，试试这几个方法就能调整高度：

• 自定义CSS覆盖默认样式
  打开浏览器开发者工具，找到组件对应的容器元素（一般是带react-drag-drop-files__drop-container这类类名的div），然后在你的全局CSS或者组件样式里写：

  .react-drag-drop-files__drop-container {
    height: 200px; /* 改成你需要的高度 */
    min-height: auto; /* 重置默认最小高度（如果有的话） */
  }
  

  要是默认样式优先级高，加个!important强制覆盖就行。

• 用父容器包裹控制尺寸
  给组件套一个自定义高度的父div，再让组件占满父容器：

  <div style={{ height: '300px', width: '100%' }}>
    <FileUploader handleChange={handleChange} name="file" />
  </div>
  

  配合CSS：

  .react-drag-drop-files__drop-container {
    height: 100% !important;
    width: 100% !important;
  }
  

• 检查组件是否支持自定义className或style
  试试给组件传className或者style属性，直接设置高度：

  <FileUploader 
    handleChange={handleChange} 
    name="file"
    style={{ height: 250, width: '100%' }}
  />
  

  或者自定义类名：

  <FileUploader 
    handleChange={handleChange} 
    name="file"
    className="custom-file-uploader"
  />
  

  然后写CSS：

  .custom-file-uploader {
    height: 250px;
  }
  

如果以上方法都不管用，再考虑替换成react-dropzone这类更灵活的文件上传组件。

内容的提问来源于stack exchange，提问作者Jasperan