Изменить начальную загрузку выбрать ширину

Question

Я использую Angular 7 и создал selectDirective для обработки экземпляра bootstrap-select в приложении.

ngOnInit() {
  // wrapping in setTimeout to delay init until after attribute binding
  jQuery(this.el).selectpicker({
    iconBase: 'fa',
    tickIcon: 'fa-check'
  });
}

В моем html-компоненте (где я использую директиву):

<div id="filters">
  <select selectDirective
          class="status-filter show-tick"
          multiple="multiple"
          title="select filter">
    <option>abc</option>
    <option>def</option>
  </select>
</div>

и scss для того же -

#filters {
  .status-filter {
    width:275px !important;
  }
}

Теперь, когда я проверяю компонент, он все еще использует ширину по умолчанию 220px, предоставленную в bootstrap-select, а затем предоставленную 275px, однако внутренний select получает ширину 275px. Кажется, что bootstrap-select не учитывает мои вложенные scss при создании структуры для его компонента.

Как я могу заставить это работать?

Answer 1

Я думаю, что ваш выбор вложен во многие теги вашего шаблона, поэтому вам нужно использовать глубокий, чтобы нацелить глубокий вложенный элемент в css

/deep/ #filters{
 .status-filter{
        width:275px!important;
 }
}