如何在 Angular Material 中自定义 md-select 的弹出菜单？答案

【问题标题】：How to customize md-select's popup menu in Angular Material?如何在 Angular Material 中自定义 md-select 的弹出菜单？
【发布时间】：2016-05-18 05:31:49
【问题描述】：

我需要为一些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的宽度限制。

【问题讨论】：

你能澄清一下你到底想做什么吗？也许那时我们可以为您指明正确的方向
@johan，我想改变弹出菜单的宽度。编辑了问题。

标签： javascript angularjs angular-material

【解决方案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>

【讨论】：

这将为所有 md-select 菜单设置宽度，但我只需要对其中一些菜单执行此操作。这就是为什么我正在寻找使用类的解决方案。这也改变了 md-select 的宽度。我需要为弹出菜单设置与 md-select 宽度不同的宽度。
而且上一版也和我想要的不一样。这将为页面上所有 md-select 的菜单应用 CSS 规则，但我只需要将它应用于所选的菜单。这就是为什么我首先开始谈论课堂作业。
好的，您可以简单地将您的类添加为所需的 md-select 上的指令