如何从父组件 CSS 将宽度应用于特定的子 ngx-bootstrap 模态

Question

我在父组件 CSS 文件中使用以下 CSS 代码来更改子模式的宽度（我正在使用 NGX 引导模式）。

父 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>

但此代码将 1000px 的宽度应用于所有子级。我希望在特定的模式上使用它。由于 modal-dialog 类是 modals 的父引导类，我无法从子级访问它，所以我在父级中编写了 CSS。我试图添加我那个特定孩子的 css 类，但它没有按预期工作。 （见下面的代码）。 （PS - 我没有在子 CSS 中应用任何与此相关的 CSS）。

父修改CSS：

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

Answer 1

我为该特定模式使用了 modal-lg 类，因此我在父组件中使用了以下 CSS。

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