Применять стили из базовых компонентов ко всем компонентам, которые от него наследуются

Question

Итак, я создал общий компонент кнопки в Angular:

import { Component, Output, EventEmitter, Input } from '@angular/core';

@Component({
  selector: 'app-general-button',
  templateUrl: './general-button.component.html',
  styleUrls: ['./general-button.component.scss']
})
export class GeneralButtonComponent  {

  @Input() public buttonTitle: string;
  @Input() public disabledButton = false;
  @Input() public fullWidth = false;
  @Input() public tooltipMessage: string;
  @Output() public buttonClick =  new EventEmitter();

  constructor() {

  }

  public buttonClicked(): void {
    this.buttonClick.emit();
  }

}

И у меня также есть кнопка отмены, которая выходит из этого компонента:

import { Component } from '@angular/core';
import { GeneralButtonComponent } from '../general-button/general-button.component';

@Component({
  selector: 'app-cancel-button',
  templateUrl: '../general-button/general-button.component.html',
  styleUrls: ['./cancel-button.component.scss']
})
export class CancelButtonComponent extends GeneralButtonComponent {

  constructor() {
    super();
  }

}

В моем глобальном стили. У меня есть стиль, в котором компонент общей кнопки должен быть скрыт, когда и виден, когда я наведен на строку, в которой он находится:

nb-accordion app-general-button,
table app-general-button {
  visibility: hidden;
}

nb-accordion nb-accordion-item:hover app-general-button,
table tr:hover app-general-button {
  visibility: visible;
}

Однако этот стиль, похоже, не применяется к компоненту кнопки отмены. Есть ли способ указать angular применить стили из базового компонента ко всем компонентам, выходящим из него?

Answer 1

Возможно, вам придется добавить файл CSS родительского компонента вместе со styleUrls в дочерний компонент. Или пришлось бы отключить ViewEncapsulation (что обычно не рекомендуется)