Javascript Filepond预览为空/不可见，即使已加载文件

我试图用它的ImagePreview插件来设置FilePond，但是即使FilePond很清楚地加载了文件，但还是有一些东西弄乱了，这导致预览列表只包含灰色的方块。即使图像数据加载正确（例如，正确的文件名放在

filepond--file info main

span）并且控件可以单击但也不可见，图像名称也不可见

我假设一些css会干扰，但我已经尝试从我的项目中删除引导和自定义样式，但它没有改变任何东西。无论是否启用了任何插件，Filepond的行为都是相同的（使用图像预览插件，灰色项会变得更高，我假设它是固定高度）

css从filepond导入到vendor.js文件中

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'filepond/dist/filepond.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';

Filepond是在我的应用程序的类构造函数中初始化的（我还尝试将类中的所有内容移到vendor.js中，但没有改变任何内容）：

我已经在这个代码沙盒中创建了我的项目的精简版本：

---

在沙箱中摆弄css之后，我发现了我的问题。我的css包含一个特定部分，负责更改filepond文件输入所在的字段集的不透明度。它逐渐进入Filepond的CSS，并使每个内容都设置为

opacity:0

。这是最初的款式：

#msform fieldset.active { opacity: 1; }
#msform fieldset {
    opacity: 0;
    position: absolute;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    width: 100%;
    padding-bottom: 20px;
    margin: 0;    
}

将

#msform字段集

更改为

#msform>字段集

是关键

---

在设置包含filepond的表单/字段集的不透明度时要小心。

我认为，如果您在codesandbox.io上创建一个测试用例，我们就可以立即看到问题，而不必首先复制repo。

#msform fieldset.active { opacity: 1; }
#msform fieldset {
    opacity: 0;
    position: absolute;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    width: 100%;
    padding-bottom: 20px;
    margin: 0;    
}