用 scss 文件覆盖primeng默认样式

Question

我试图覆盖primeng卡上的一种默认样式，但由于某种原因，当我使用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

您可以通过将一个类设置为组件的父类来自定义大多数primeng组件样式，styleClass之后您可以高估组件元素类

模板

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

示例 样式.scss

.ngx-color {
  &.p-card {
    border-radius: 1rem;
    overflow: hidden;
  }

  .p-card-title {
  }
  .p-card-body {
    padding: 2rem !important;
    background: #a6120d;
    color: #fff;
  }
}

demo ?

检查这个primeng theming

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

Answer 2

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

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