Angular：覆盖嵌套组件的 scss 样式

Question

I created a spinner component. I wanted it to be self-contained and not rely on external css, so in the component I include the scss to style it. The component template is a div with a class of sbl-circ . I can add this anywhere in my app and it works as designed.

Now, I created a second component (a button). I want to add the spinner component to this button. It works, but the spinner color is not correct for when it's inside the button.

So, I am trying to re-color the spinner with the scss for the button component. So far the only way it works is if I do

:host ::ng-deep {
  button.btn.btn-primary {
    .sbl-circ {
      color: white;
    }
  }
}

I know that ::ng-deep is deprecated. What's the correct way for the button component to re-color any spinner components inserted inside of it?

Answer 1

Try using :host-context .

You should be able to use it like:

:host-context(button.btn.btn-primary) .sbl-circ {
  color: white;
}

Answer 2

Excuse my unfamiliarity with angular. But if I were to attempt the resulting css to not be over-written by another style, I would try to use !important as a property value in the scss.
Example:

p {
    color: red !important;
}