背景图像未应用于 ngx-file-drop 组件答案

【问题标题】：Background image not getting applied to ngx-file-drop component背景图像未应用于 ngx-file-drop 组件
【发布时间】：2021-09-05 18:31:40
【问题描述】：

我在 Angular 7 应用程序中实现了ngx-file-drop 组件，它允许拖放文件上传。我需要更改内容区域的背景，其中 while 与图像一起放置。我尝试css 并分配contentClassName 属性，如

contentClassName = "upload-background-image"

.upload-background-image {
     background-image: "./images/spritemap.png"

它没有应用背景图片。我该怎么办。这是stackblitx

html

<div class="center" class="file-upload-wrapper">
    <ngx-file-drop 
           dropZoneLabel="Drop files here"
           multiple="true" 
          (onFileDrop)="dropped($event)" 
          (onFileOver)="fileOver($event)" 
          (onFileLeave)="fileLeave($event)">
        <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
          Optional custom content that replaces the the entire default content.
          <button type="button" (click)="openFileSelector()">Browse Files</button>


        </ng-template>
    </ngx-file-drop>
     <div class="upload-table">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody class="upload-name-style">
                <tr *ngFor="let item of files; let i=index">
                    <td><strong>{{ item.relativePath }}</strong></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

当我尝试应用以下 css 时，它仍然不适用

.ngx-file-drop__drop-zone {
     margin: 20px;
     height: 250px;
        background: #333;
        color: #fff;
        border: 5px dashed rgb(235, 79, 79);
        border-radius: 5px;
        font-size: 20px;


    }

html 元素外观的屏幕截图

【问题讨论】：

标签： html css angular

【解决方案1】：

您的主帖信息不足，例如写的css类在哪里。

如果您在组件样式文件中编写自定义 CSS，那么它将不起作用，因为 ngx-file-drop 将使用他自己的组件 .css。要使其正常工作，您需要将自定义 css 放入通用 css 文件中（如全局 style.css）

不管怎样，这是一个带有背景颜色的Stackblitz，你可以从中获得灵感。

【讨论】：

【解决方案2】：

将您的 css 添加到全局文件 style.css

这是这样的结构

"styles": [

  ],

你需要在"style":[],下面添加这一行

"src/styles.css"

如果您想添加更多样式，请将您的 css 类添加到 styles.css

您在Stackblitz上的源代码

【讨论】：

【解决方案3】：

类必须以全局样式声明。

dropZoneClassName="drop-zone" 转换为class="drop-zone"（不是基于组件的样式），因此必须在全局样式表或 app.component.scss 中声明该类

【讨论】：