无法更改类的 CSS 样式答案

【问题标题】：Unable to Change CSS Stylings of a Class无法更改类的 CSS 样式
【发布时间】：2020-06-10 21:00:26
【问题描述】：

这个问题困扰我很久了。我无法为vue2-dropzone 的缩略图预览定位 CSS 样式类（根据文档，vue2dropzone 似乎与 dropzone.js 共享许多类似的属性）。每当我上传图片时，这个 CSS 类都会出现在我的 dropzone HTML 标签中。

我发现我需要覆盖放置在 CSS 中的默认值 min-height: 100px，否则我最终会得到如下所示的结果，其中显示一个从图像突出的白框。

这是我的 vue 文件中的代码，因为它与 id 和 ref 相关：

    <vue2Dropzone 
    ref="vue2dropzone" 
    id="dropzone" 
    class="vue-dropzone"
    :options="dropzoneOptions"
    @vdropzone-s3-upload-error="s3UploadError"
    @vdropzone-s3-upload-success="s3UploadSuccess"
    ></vue2Dropzone>

我尝试了很多东西，但它似乎不起作用，即使是一些简单的东西，例如

.dropzone .dz-preview {
   min-height: 10px;
}

甚至添加了!important，但它似乎没有奏效。

我已经尝试在我的 CSS 中定位它：

#dropzone .dz-preview .dz-image-preview .dz-processing{
  min-height: 10px !important;
}

当我尝试这个时，似乎我所做的任何更改都不会导致 CSS 样式被更改/影响。我什至只是尝试在图像上添加一些效果来更改 CSS，但仍然看不到任何效果发生。

#dropzone .dropzone .dz-preview .dz-image img{
  min-height: 10px;
  border: 20px solid red;
}

有谁知道我可以尝试更改缩略图预览大小的其他内容吗？我尝试在 dropzone 选项中更改 thumbnailWidth 和 thumbnailHeight ，但它不会摆脱实际图像下方的白色突出框。

【问题讨论】：

您可以为您的问题制作一个代码框吗？另外，您是否尝试过使用 :include-styling="false" 属性自定义样式？ rowanwins.github.io/vue-dropzone/docs/dist/#/custom-preview
它的用法通常很差，但是您是否尝试过在内联样式中使用!important？

标签： css vue.js dropzone.js vue2-dropzone

【解决方案1】：

Vue2dropzone 不会应用任何自定义 CSS，除非 Dropzone 元素具有 :include-styling="false" 属性，就像 @Zed Home 的评论所说的那样。如果你有这个道具，那么你所有的样式都会被应用。

唯一的问题是，您将丢失所有默认的 Dropzone 样式，这非常多，因此您必须编写额外的 CSS 来覆盖（现在丢失的）默认样式。我希望这是有道理的。尝试添加道具，看看会发生什么。

例子：

<vue2Dropzone 
    ref="vue2dropzone" id="dropzone" class="vue-dropzone"
    :options="dropzoneOptions"
    :include-styling="false"
    @vdropzone-s3-upload-error="s3UploadError"
    @vdropzone-s3-upload-success="s3UploadSuccess"
></vue2Dropzone>

在文档中了解更多信息：https://rowanwins.github.io/vue-dropzone/docs/dist/#/custom-preview

【讨论】：