Question

我正在使用ngPrime组件，如果我将它们设置为样式，则不适用于dashboard.component.sass文件，但是当我使用global style.sass文件时它们会应用。

dashboard.component.html文件

<p-dropdown [options]="reports" styleClass="report-dropdown">
      <ng-template let-item pTemplate="selectedItem">
        <i class="fas fa-th" style="fill: white;"></i>
        <span style="vertical-align:middle">
          {{item.label}}</span>
      </ng-template>
    </p-dropdown>

dashboard.component.scss和global style.scss文件

.report-dropdown {
  .ui-dropdown-label {
    background-color: $secondary;
    color: white;
  }
  .ui-dropdown-trigger {
    color: white;
    background-color: $secondary;
    border: none;
  }
}

Answer 1

如果要在组件中设置样式，只需在要应用的规则之前使用const path = require('path'); module.exports = { entry: { chatUI: './src/chat-ui.ts', chatLogic: './src/chat-logic.ts', }, resolve: { extensions: [ '.js', '.jsx', '.json', '.ts', '.tsx' ] }, output: { path: path.join(__dirname, '.webpack'), filename: '[name].js', }, node: { fs: 'empty', tls: 'empty' }, target: 'web', module: { loaders: [ { test: /\.tsx?$/, loader: 'awesome-typescript-loader' } ], }, };。

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

确实已经弃用了，但到目前为止还没有替代品，所以你现在也可以使用它

<强> dashboard.component.scss

ng-deep

我不知道primeng，但我分叉了一个旧的stackblitz显示颜色变化（虽然下拉菜单没有打开）

https://stackblitz.com/edit/primeng-bootstrap-ylpzwd?file=app/app.component.scss

其他解决方案

另一种解决方案是在全局样式表中设置样式。只要您的CSS规则比ngPrime默认应用的CSS规则更具体，

就可以使用

Answer 2

默认情况下，Angular 组件样式会影响组件的视图。这意味着您编写的样式将影响组件模板中的所有元素。它们不会影响模板中其他组件的子元素。您可以在 Angular documentation 中阅读有关视图封装的更多信息。

如果你的组件开启了视图封装（默认），你的组件样式只会影响模板中的顶级子级。除非您执行以下任一操作，否则属于子组件的 HTML 元素无法成为您的组件样式的目标：

（正如您已经提到的）将覆盖样式添加到您的全局样式表中。限定选择器的范围，使其仅影响您需要的特定元素。
在您的组件上关闭视图封装。如果这样做，请确保适当地确定样式的范围，否则最终可能会偶然地将其他组件定位到应用程序中的其他位置。
（不建议）使用已弃用的穿透阴影的后代组合器来强制将样式应用于所有子元素。在 Angular documentation 中阅读有关此已弃用解决方案的更多信息。

样式不适用于组件级别，但适用于全局级别

2 个答案: