Angular: переопределить стили css вложенного компонента

Question

Я создал компонент счетчика. Я хотел, чтобы он был автономным и не зависел от внешнего css, поэтому в компонент я включил s css для его стилизации. Шаблон компонента - это div с классом sbl-circ. Я могу добавить это в любое место моего приложения, и оно будет работать как задумано.

Теперь я создал второй компонент (кнопку). Я хочу добавить спиннер к этой кнопке. Это работает, но цвет прядильщика неверен, когда он находится внутри кнопки.

Итак, я пытаюсь перекрасить прядильщик с помощью s css для компонента кнопки. Пока единственный способ, которым это работает, - это если я

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

, я знаю, что ::ng-deep устарела. Какой правильный способ для компонента кнопки перекрасить любые компоненты счетчика, вставленные в него?

Answer 1

Извините за незнакомство с angular. Но если бы я попытался не перезаписать полученный css другим стилем, я бы попытался использовать !important в качестве значения свойства в s css.
Пример:

p {
    color: red !important;
}

Answer 2

Попробуйте использовать :host-context.

Вы можете использовать его как:

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