Какой самый простой способ изолировать / охватить все стили SCSS для виджета Angular [Elements]?

Question

У меня есть виджет Angular 7 elements, который я позже внедряю в более крупное приложение.Когда я тестирую виджет изолированно, все стили работают правильно, так как он обращается к стилям для компонента и глобальным стилям в assets/styles/global.scss.Когда я встраиваю виджет в конечное целевое приложение, я получаю много стилей и стилей как приложения, так и разрыв виджета.

Я пытался просто обернуть все компоненты стилей и глобальные в своем виджете, оборачивая ихв классе .ba то есть короткая рука для book-appointment например

Я обертываю свой компонент scss мастера встреч с .ba:

.ba {
    .appointment-wizard-title {
        font-size: 20px;
    }
    ...
}

Я обертываю свой глобальный scss с .ba:

.ba {
    h1,
    h2 {
        font-size: 38px;
        font-weight: 100;
    }

    body {
        background: transparent;
    }

    .input-group {
      position: relative;
      display: table;
      border-collapse: separate;
    }
    ...
}   

Затем я оборачиваю свой виджет в div с классом ba:

<div class="ba">
    <app-root></app-root>
</div>

Когда я тестирую виджет изолированно с ng serve, это работает частично, номного деталей стиля потеряно.Мне не хватает способа указать, что все стили должны применяться только к элементам и классам, которые существуют под div классифицированными ba ... как это сделать?

Answer 1

<div class="ba">
    <app-root></app-root>
</div>

, кажется, охватывает все приложение.Если у вас есть компонент виджета, вы можете.

Alt1.использовать локальные стили только для этого компонента.Он будет существовать только внутри компонента.например:

@Component({
  selector: 'my-component',
  template: 'my-component.html',
  styles: ['my-component.scss']
}) 

Alt2.используйте класс 'ba' ближе к виджету.С помощью хоста связывания оформителя в компоненте вашего виджета.Держите ваши стили глобальными

@HostBinding('class.ba') someField: boolean = true;

Примечание.Даже если Alt1 кажется заманчивым, вам нужно обратить внимание на большой импорт других sass-файлов.Вы можете в конечном итоге дублировать ваши CSS-файлы в dist