如何从父组件CSS将宽度应用于特定的子ngx引导模式

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的宽度应用于所有子级。我想要一个特定的模态。由于模态对话框类是模态的父引导类，我不能从子类访问它，所以我在父类中编写了CSS。我已经尝试添加我的那个特定孩子的css类，但它并没有按预期工作。(请参阅以下代码(。(PS-我还没有在子css中应用任何与此相关的css(。

父级修改的CSS:

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

Answer 1

我为特定的模态使用了模态lg类，因此我在Parent组件中使用了以下CSS。

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