Angular component custom style from parents

Question

I would like to enable custom CSS variables to customize a component in my Ionic application.

I read about using custom CSS properties but I can't figure out how it works.

From Angular official docs:

Authoring a component to support customization As component author, you can explicitly design a component to accept customization in one of four different ways.

1. Use CSS Custom Properties (recommended) You can define a supported customization API for your component by defining its styles with CSS Custom Properties, alternatively known as CSS Variables. Anyone using your component can consume this API by defining values for these properties, customizing the final appearance of the component on the rendered page.

While this requires defining a custom property for each customization point, it creates a clear API contract that works in all style encapsulation modes.

I tried using @HostBinding:

@HostBind('style.--custom-property') customProp;

But I don't understand how to apply the css property to my component from one of its parents.

Answer 1

Finally I found how to solve this:

Child component

.cmp-class {
  color: var(--custom-color, red);
}

<div class="cmp-class"><p>Hello</p></div>

Parent component

child-cmp {
  --custom-color: blue;
}

<child-cmp></child-cmp>