Как применить ширину к указанным c дочерним ngx- bootstrap Модальным из родительского компонента CSS

Question

Я использую следующий код CSS в файле родительского компонента CSS, чтобы изменить ширину дочернего модала (я использую модальные NGX bootstrap).

Родитель CSS:

::ng-deep .modal-dialog {
    min-width: 1000px;
}

Родитель HTML:

<!-- Modal -->
<div class="modal-header" style="padding-bottom: 0px">
    <h2 class="modal-title" id="exampleModalLabel">Modification History</h2>
    <button type="button" class="close" data-dismiss="modal" (click)="bsModalRef.hide()" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <app-mod-logs [searchInput]="searchInput"></app-mod-logs>
</div>

Ребенок HTML:

<div class="modal-dialog filter">
<div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">
        Advanced Filter
    </h5>
    <button type="button" 
        class="close" 
        data-dismiss="modal" 
        (click)="bsModalRef.hide()" 
        aria-label="Close">
        <span aria-hidden="true">
            &times;
        </span>
    </button>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-4 py-3 px-lg-1 border bg-light column1">
            <div class="heading">
                <b>Available Objects</b>
            </div>
            <ul class="list-group container1">
                <li class="list-group-item list-group-item-action"
                [ngStyle]="{width: objectWidth}"
                [class.active]="active === i" 
                (click)='loadKeyItems(object.KeyObject); activated(i);' 
                *ngFor="let object of availableObjects; let i = index;">
                    {{object.SourceObject}}
                </li>
            </ul>
        </div>
        <div class="col-md-4 py-3 px-lg-1 border bg-light column2">
            <div class="heading">
                <b>Available Items</b>
            </div>
            <ul class="list-group container2">
                <ngx-spinner name="boxSpinner" 
                    [fullScreen]="false" 
                    type="ball-spin-clockwise" 
                    size="small">
                </ngx-spinner>
                <li [ngStyle]="{width: availableWidth}" 
                    class="list-group-item list-group-item-action" 
                    (dblclick)='pushToSelected(keyItem.Id)' 
                    (mousedown)="disableTextSelection($event)" 
                    *ngFor="let keyItem of KeyItems">
                        {{keyItem.Caption}}
                </li>
            </ul>
        </div>
        <div class="col-md-4 py-3 px-lg-1 border bg-light column3">
            <div class="heading">
                <b>Selected Items</b>
            </div>
            <ul class="list-group container3">
                <li [ngStyle]="{width: selectedWidth}" 
                    class="list-group-item list-group-item-action" 
                    (dblclick)='pushToAvailable(select.Id)' 
                    (mousedown)="disableTextSelection($event)" 
                    *ngFor='let select of selectedItemArray'>
                        {{select.Caption}}
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" 
        class="btn btn-secondary" 
        (click)='clear()'
        [disabled]='buttonDisabled'>
        Clear
    </button>
    <button type="button" 
        class="btn btn-secondary" 
        [disabled]='buttonDisabled'>
        Apply Filters
    </button>
</div>
</div>

но это Код применяет ширину 1000 пикселей ко всем дочерним элементам. Я хочу это на конкретном c модальном. И так как класс модального диалога является родительским bootstrap классом модалов, я не могу получить к нему доступ от детей, поэтому я написал CSS в родительском. Я попытался добавить css класс моего, указанного специалиста c child, но он не работает должным образом. (См. Следующий код). (PS - я не применил никаких css, связанных с этим у ребенка CSS).

Родитель изменен CSS:

::ng-deep .modal-dialog .filter {
    min-width: 1000px;
}

Answer 1

Я использовал класс modal-lg для этой спецификации c, поэтому я использовал следующий CSS в родительском компоненте.

::ng-deep .modal-lg {
    min-width: 1000px !important;
}