更改引导程序选择的宽度

Question

我正在使用angular 7，并创建了一个selectDirective来处理应用程序中的引导程序选择实例化。

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;
  }
}

现在，当我检查组件时，它仍使用bootstrap-select中提供的默认宽度220px，然后提供275px，但是内部选择的宽度为275px。似乎bootstrap-select在创建其组件的结构时并没有考虑我的嵌套scss。

我如何使其起作用？

Answer 1

我认为您的选择嵌套在模板的许多标记中，因此您需要使用deep来定位css中的deep nesting元素

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