使用 css 变量绑定到 html 样式示例 [style.background]="'var(--accent-1)'" [style.background]="'var(--accent-1)'"

问题描述

我的 CMS 允许十六进制值动态设置 html 元素的样式。例如，如果 bgColor 的值为 #fff 那么我可以使用以下 html 正确设置它

[style.background]="cms?.bgColor"

现在，如果 cms 值是一个预设的 css 变量，比如 var(--accent-1) 现在，即使我使用直接的 css (background: var(--accent-1))，同样的 html 也不会工作；它有效。

我通过删除动态逻辑 [style.background]="'var(--accent-1)'"

确认这不起作用

[style.background]="'var(--accent-1)'"

有这样的版本吗？

解决方法

试试 ngStyle 指令。它的逻辑只是应用样式而不尝试解析值

[ngStyle]="{backgroundColor: 'var(--accent-1)'}"