Angular - 样式被忽略/覆盖

Posted 2023-02-23

【中文标题】Angular - 样式被忽略/覆盖

【英文标题】：Angular - styles being ignored/overwritten

【发布时间】：2018-08-04 04:14:18

【问题描述】：

我遇到了未将样式应用于元素的问题。如果我在组件的样式参数中添加样式信息，或者在 styleUrls 参数中提供 CSS 文件，我会得到预期的结果。但是，没有应用内联 html 样式。在下面的示例中，我尝试将红色背景应用于 div，但它保持白色。此 HTML 作为 Angular 组件的模板存在。

<div style="background: red;">test</div>

但是，如果我将 ngStyle="" 添加到元素中，例如：

<div style="background: red;" ngStyle="">test</div>

然后 Angular 将 div 的背景渲染为红色。

任何想法是什么导致 Angular 忽略这样的样式属性？

【参考方案1】：

ngStyle 和 style 是一样的，都是应用样式 您可以同时填充，并且都将应用样式（一个不会取消另一个，除非两者都尝试做同样的事情），但是使用 [ngStyle] 您可以将其绑定到代码中的属性，如下所示： [ngStyle]="backgroundColor: getColor()"，getColor() 是一个延迟字符串或十六进制颜色的函数。

这个 sn-p 例如 应该在 angular 2 中有效（工作中无法验证）

<div style="background-color: black;" [ngStyle]="color: white">text with back background and white font color</div>

Why the ngStyle directive is declared into the []?

【讨论】：

谢谢。与 Node.js 一起安装时，PrismJS 确实带有八个主题。我的 .angular-cli.json 中有这种风格： "styles": [ ... "../node_modules/prismjs/themes/prism-coy.css" ],

虽然问题比 PrismJS 更大，但我什至无法使用内联样式标签更改 div 的背景颜色。

你在加载什么 CSS？因为如果您没有加载自定义 css“主题”，那么就会出现一些严重的问题，您是否可以对问题进行 stackblitz 复制并查看一下？

在这一点上，我不认为 PrismJS 在这里存在问题，也许我不应该将它包含在描述中。我的问题是样式被忽略了。在原始帖子的 HTML 中，我什至无法将 div 的背景更改为红色。

它确实发生了变化 - 您提供的代码 sn-p 中的背景是红色的，您的显示器可能有颜色问题，您的项目在 github 上吗？如果不是，也许您可​​以将其上传并链接我，我可以进一步调查？

【参考方案2】：

我最终升级了我的所有库（从 Angular 4 到 Angular 5）并且没有更改代码，样式信息按预期呈现。