如何解决如何在没有/deep/的情况下覆盖`ng-template`构建字段的css样式?
我有一些使用 ng-template
的组件的问题。如果我使用的组件生成了一些我不想要的元素或包含错误的东西,我会寻找解决方法。理想情况下我不应该这样做,但是一旦这些依赖库出现问题,我就不得不这样做。以前使用 popver
遇到类似问题,现在使用 ngx-datatable。如果您能告诉我我需要遵循的更好的做法,我将不胜感激。
即这里对于 ngx-datatabler-row-detail
模板,我得到一个带有 div
的输出,它具有 .datatable-row-detail
类。如果我不使用 /deep/
覆盖它(我听说已弃用),即使 !important
也无法覆盖宽度。我如何为角度组件中生成的字段覆盖这些类样式,因为无法给它们一个 id
?
/deep/
.datatable-body-row{
border-bottom:1px solid #000;
}
/deep/
.datatable-row-detail{
width:600px !important;
}
<!-- Row Detail Template -->
<ngx-datatable-row-detail [rowHeight]="120" #myDetailRow (toggle)="onDetailToggle($event)">
<ng-template
...>
<div style="padding-left:35px" >
<div><strong>==== Details ===</strong></div>
<li *ngFor="let detail of row.details">
{{detail }}
</li>
</div>
</ng-template>
</ngx-datatable-row-detail>
<ngx-datatable-column>
<ng-template
...>
<a
(click)="toggleExpandRow(row)"> <i class="fa fa-cube btn-link" hover-class="active"></i>
</a>
</ng-template>
</ngx-datatable-column>
请看这个stackblits。只需从 css 中删除 /deep/
,当您点击 open
时,您将不再看到背景。
https://stackblitz.com/edit/ngx-datatable-row-detail-omuywi?file=app/app.component.css
解决方法
我认为不可能以干净的方式覆盖来自 Angular 组件的第三方组件样式。 (有一些选项,例如使用已弃用的 deep
或关闭 ViewEncapsulation
。)
但是,可以从应用根目录中的全局 styles.scss
覆盖它们。如果我们把下面的样式放进去,就可以了:
.datatable-body-row {
border-bottom: 1px solid #000;
}
.datatable-row-detail {
background: rgb(134,79,79) !important;
}
堆叠闪电战: https://stackblitz.com/edit/ngx-datatable-row-detail-mj3otr?file=styles.css
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。