自定义样式不适用于 angular 10

Posted 2023-03-13

【中文标题】自定义样式不适用于 angular 10

【英文标题】：Customized style not applied on angular 10

【发布时间】：2021-10-25 16:16:23

【问题描述】：

我需要一些关于从 Angular 7 升级到 Angular 10 的帮助。

我的 Angular 应用程序运行良好，没有任何错误，并且应用了自定义的全局样式！

在之前的版本 (7) 中，如果组件具有样式

.p-progress-spinner  width: 100px 

并且自定义的全局样式有

.p-progress-spinner  width: 280px 

Angular 将 280px 应用于“p-progress-spinner”，但是当我升级到 Angular 10 后，这种行为发生了变化；它总是采用组件样式值（ 100px ）而不是全局值！

如果我打开浏览器工具来调试样式，我看到两者都存在，但只应用了“100px”。

示例：

谢谢。

【参考方案1】：

将组件封装更改为无它会起作用

类似的东西

@Component(
 selector: 'app-no-encapsulation',
 template: `
 <h2>None</h2>
 <div class="none-message">No encapsulation</div>
 `,
 styles: ['h2, .none-message  color: red; '],
 encapsulation: ViewEncapsulation.None,
)

【讨论】：

首先感谢您的回答，但这无济于事，因为我使用的是Primeng，我无法更改它们！ .