Фоновое изображение не применяется к компоненту ngx-file-drop - PullRequest
0 голосов
/ 02 июля 2019

Я реализовал компонент ngx-file-drop в приложении angular 7, которое позволяет перетаскивать файлы для загрузки. Мне нужно изменить фон области содержимого, где в то время как сбрасываются с изображением. Я попытался 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

enter image description here

Ответы [ 2 ]

0 голосов
/ 02 июля 2019

Добавьте вашу CSS в глобальный файл style.css

Это структура, подобная этой

"styles": [

  ],

, вам нужно добавить эту строку в "style":[],

"src/styles.css"

Если вы хотите добавить больше стилей, добавьте свой класс css в styles.css

ваш исходный код на Stackblitz

0 голосов
/ 02 июля 2019

Недостаточно информации в вашем основном посте, где приведен класс css для примера.

Если вы напишите свой собственный CSS в файле стиля компонента, он не будет работать, потому что ngx-file-drop будет использовать свой собственный компонент .css.Чтобы заставить его работать, вам нужно поместить свой собственный CSS в общий файл CSS (например, глобальный style.css)

В любом случае, вот вам Stackblitz с цветом фона, просто вдохновляйтесебя от этого.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...