如何不影响全局修改组件库的样式

以ng-zorro的modal对话框组件为例。

    <nz-modal nzWidth="50%" [(nzVisible)]="isVisible" [nzTitle]="modalTitle" nzClassName="materialslist-dialog"
        [nzContent]="modalContent"
        [nzFooter]="modalFooter"
        (nzOnCancel)="closeCancel()">
        <ng-template #modalTitle>
            <div class="dialog-header">场景模板</div> 
        </ng-template>
    
        <ng-template #modalContent>
            <div class="dialog-content">
                <iframe [src]="videoUrl" frameborder="0" width="100%" height="500px"></iframe>
            </div>
        </ng-template>
    
        <ng-template #modalFooter>
            <div class="dialog-footer"><button nz-button nzType="primary" (click)="isModalVisible=true">覆盖当前场景</button></div>
        </ng-template>
    </nz-modal>

主要是利用nzClassName属性，我们看一下加了这个属性后的html：

1.png

如果我们要修改关闭按钮的样式ant-modal-close-x，那就可以只修改materialslist-dialog类名下的ant-modal-close-x，这样就不会影响全局。
为了提升优先级，可以利用深度选择器::ng-deep进行全局穿透，不过只针对materialslist-small-dialog这个命名空间进行穿透即可，这样就不会影响全局样式。

::ng-deep .materialslist-small-dialog {
    .ant-modal-content {
        border-radius: 8px;
        background: #303030;
       .ant-modal-close-x {
            width: 60px;
            line-height: 30px;
            .ant-modal-close-icon {
                font-size: 16px;
            }
        }
    }
    
}