如何在Angular Material中自定義md-select的彈出菜單？

Question

我需要為某些md-select的彈出菜單定義一個特殊的類（不是全部）。 但我不知道該怎么做。

這是典型用法的代碼示例，這里我沒有可以為將出現的菜單容器定義類的地方。

<md-input-container md-no-float class="md-block defaultInputSelect filterType">
  <md-select ng-model="value.filter_type" md-on-close="viewChanged()">
    <md-option ng-repeat="(key, value) in filterTypes" value="{{value}}">
      {{filterTypesNames[key]}}
    </md-option>
  </md-select>
</md-input-container>

實際上，我想改變彈出菜單的寬度。 默認情況下，它受md-select的寬度限制。

Answer 1

您好，請看下面的plunkr，以下選擇器似乎工作正常影響整個組件

https://plnkr.co/edit/sp7mKuaeztfAgtujARcw?p=preview

 <style type="text/css">
    md-input-container,
    md-input-container > * {
      width: 100% !important;
    }
  </style>

編輯：在這里，這只會影響選擇下拉列表

https://plnkr.co/edit/sp7mKuaeztfAgtujARcw?p=preview

<style type="text/css">
   ._md-select-menu-container
    {
      width: 100% !important;
    }
  </style>

最終編輯：只需將md-container-class =“myclass”指令添加到md-select即可

https://plnkr.co/edit/sp7mKuaeztfAgtujARcw?p=preview

<style type="text/css">
  .myclass {
    width: 100% !important;
  }
</style>

<md-select md-container-class="myclass" ng-model="selectedItem" md-selected-text="getSelectedText()">
  <md-optgroup label="items">
    <md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option>
  </md-optgroup>
</md-select>