使用主机绑定设置自定义 css 变量

Question

I am trying to make a component customizable by having the color as an input. In the end, I want to be able to use the component like this <component-name color="myColor"></component-name> :

To start with, I'm trying to set the css variable using hostbinding, like this:

 @HostBinding('style.--color') myColor: string = '--blue'

 :host { --blue: #5dbbbb; --green: #286e22; background-color: var(--color); }

But the blue never renders. If I inspect the component in chrome, I can see that it has "background-color: --color" When I look at the variable it's defined as --color: --blue

It works fine if I use the hex code directly (@HostBinding('style.--color') myColor: string = '#xxxxxx') instead of the css variable for the color, but I want to avoid that if possible. Any thoughts on what could be wrong? I'm using Angular14.

Answer 1

I think you should change your HostBinding code

this

 @HostBinding('style.--color') myColor: string = '--blue'

to

 @HostBinding('style.--color') myColor: string = 'var(--blue)'

And it should work