如何从angular组件中访问本地css类名

Question

我需要从angular组件中访问生成的css类名，以便为第三方组件设置样式。

Angular对本地css类名进行一些神奇的转换，以启用作用域。我需要对一个ngx-datatable组件应用一些自定义样式。为此，我需要向它传递自定义类名。由于angular对类名的作用，这些类名不再匹配。

将类名添加到全局作用域或使用::ng-deep都可以工作，但是我不希望破坏封装。

仪表板-Component.ts

@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent {
    getRowClass(row){
        return 'my-class';
    }
}

仪表板-Component.scss

.my-class {
   background: green;
}

仪表板-component.html

<ngx-datatable
   [rowclass]="getRowClass"
></ngx-datatable>

在我看来，我应该能够从组件中访问对css类的一些引用，比如this._styles，它将在运行时携带类的生成名称，所以我可以这样做

getRowClass(row){
    return this._styles['my-class'];
}

Answer 1

我认为您无法将样式传播到ngx-dataTable。

您可以在@component中使用encapsulation:viewencapsulation.none，但要确保谨慎使用，因为它会导致一些奇怪的css行为。

接下来，您可以做的是为dashboard.html文件创建一个容器，如下所示：

<div class="dashboard-container">
  <ngx-datatable></ngx-datatable>
</div>

在dashboard.scss中，可以引用父容器

.dashboard-container {
  .my-style{}
}