Question

我已经在angular 7应用程序中实现了ngx-file-drop组件，该组件允许拖放文件进行上传。我需要更改放置图像的内容区域的背景。我尝试过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元素的外观截图

Answer 1

您的主要文章中没有足够的信息，例示的css类在哪里？

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

无论如何，这是一个带有背景色的Stackblitz，就是从中激发自己的灵感。

Answer 2

将CSS添加到全局文件 style.css

这是这样的结构

"styles": [

  ],

您需要在"style":[],下添加此行

"src/styles.css"

如果要添加更多样式，则将CSS类添加到 styles.css

中

您在Stackblitz上的源代码

背景图片未应用到ngx-file-drop组件

2 个答案: