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

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

模板

<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;
  }
}

demo ?

选中此primeng theming

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

Answer 2

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

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

用scss文件覆盖primeng默认样式

2 个答案: