用scss文件覆盖priming默认样式

Question

我试图覆盖原始卡上的一个默认样式，但由于某些原因，当我使用scss文件时，样式没有应用。下面是我尝试过的代码，同样的代码也适用于css文件。

我在模板上有以下代码

<p-card>
<app-component></app-component>
</p-card>

并在scss文件上尝试过

:host >>> .p-card .p-card-body {
padding:  0.5rem;
}

我在appComponent 上有这个

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

当我使用css但不处理scss文件时，同样的风格也适用。我还有别的事要做吗？

Answer 1

您可以自定义大多数原始组件样式，方法是使用styleClass将一个类设置为组件的父类，然后您可以覆盖组件元素类

模板

<p-card styleClass="ngx-color">
<app-component></app-component>
</p-card>

示例style.scss

.ngx-color {
&.p-card {
border-radius: 1rem;
overflow: hidden;
}
.p-card-title {
}
.p-card-body {
padding: 2rem !important;
background: #a6120d;
color: #fff;
}
}

演示

检查这个启动主题

每个组件都有不同的类集，您可以在官方组件文档页面的样式部分查看这些类作为示例卡。

Answer 2

:host {
::ng-deep .p-card .p-card-body {
padding:  0.5rem;
}
}

只需将其复制并粘贴到您的scss文件中即可。

Answer 3

我遇到了同样的问题，我找到了解决方案，首先将ViewEncapsulation设置为没有ts文件，然后只添加.p-card.p-component .p-card-body { ......./ }