css - Primeng 从组件覆盖样式

Question

我在 html 中有一个组件:

<app-terminate-product _ngcontent-c27="" _nghost-c37="">
   <p-overlaypanel _ngcontent-c37="" ng-reflect-style-class="overlay-content">
     <div class="overlay-content ui-overlaypanel........>

我的 html 文件:

    <p-overlayPanel [styleClass]="'overlay-content'">SOME INPUTS HERE</p-overlayPanel>   

我想向 ui-overlaypanel 添加一些东西，但它在我的 TerminateProductComponent.scss 中不起作用:

.ui-overlaypanel { something: ..}

我也尝试在我的 styles.scss 中添加选择器，但它不起作用..

.overlay-content .ui-overlaypanel {...}

如何向 .ui-overlaypanel 添加样式？

Answer 1

您可以创建一个新的 .css 文件，在 .ui-overlaypanel 中向该文件添加所有必要的更改，然后在加载 primeng .css 文件后加载它。您可以通过简单地编辑 .angular-cli.json 文件来实现它。在 angular-cli.json 中找到 styles 数组并在 primeng 后添加你的 .css 文件，例如:

  "styles": [
    "styles.css",
    "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/primeng/resources/themes/omega/theme.css",
    "overwrite.css"
  ]

你也可以像这样使用内联[style]:

<p-overlayPanel [style]="{'text-align': 'center', 'background-color': 'blue'}">SOME INPUTS HERE</p-overlayPanel>