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文件即可实现。在styles中查找angular-cli.json数组，并在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>

Primeng覆盖组件的样式

1 个答案: