调整 mat-option 元素的宽度（更短）答案

【问题标题】：Resize the width (shorter) on a mat-option element调整 mat-option 元素的宽度（更短）
【发布时间】：2018-11-27 10:14:05
【问题描述】：

我正在尝试在 mat-select 中调整（缩短）mat-options 的大小。不幸的是，我总是得到一个额外的填充区域。没有为此设计的方法吗？有人有经验吗？这是我的 StackBlitz，非常接近：

基本上，我需要在 StackBlitz HERE 上将所有 3 个下拉项目实际宽度设为 100 像素。

编辑

我仍然需要帮助

@David 的回答非常接近，在没有:host 的情况下设置 cdk-overlay-container 的样式会出现一些问题

我无法使用:host，因为它会影响屏幕上的其他下拉菜单。

【问题讨论】：

你不能只使用 CSS 和更准确的选择器（因为它具有优先级）或使用 !important 吗？
不是真的，你能帮忙吗.. 主要问题之一是 +32px。或者至少由于动画的速度等原因我找不到正确的类。我知道css和！重要但没有任何运气。而且这个 transformPanel 不是最容易覆盖的元素
这是你想要的吗？ stackblitz.com/edit/…
这可能有助于您调试：在 Chrome 中，您可以减慢甚至停止动画以在特定时间检查元素：imgur.com/a/ro3y37R
在使用mat-select 时，我发现添加一个自定义类并将该类定位到mat-form-field 很有用，然后您可以删除padding、margin 并设置一个width ;我最终得到了这样的东西imgur.com/a/jcurGsk

标签： angular angular-material

【解决方案1】：

可能有更好的方法来做到这一点，但只需使用 CSS 就可以做到这一点

::ng-deep .cdk-overlay-pane
{
  min-width: auto !important;
}

::ng-deep .cdk-overlay-container
{
  display:inline-block;
}

::ng-deep .ng-animating .mat-option {
  margin-right: -32px;
}

Stackblitz demo

编辑

确实有一个问题：overlay 容器是材质组件通用的。因此，如果您像上面那样设置样式，CSS 规则将适用于所有选择组件。此外，覆盖容器位于组件本身之外，因此您不能使用顶级选择器来限制规则，例如:host。

我创建了一个示例，该示例在覆盖层中添加/删除自定义类，以便样式不会泄漏到其他选择组件。

这有点小技巧，它们可能是更好的解决方案（也许如果您创建自己的叠加层）

当您打开/关闭选择时它仍然无法正常工作

Stackblitz demo

【讨论】：

这很好..我可以接受它，但是当我去实现它时，我遇到了 ::ng-deeps 影响其他下拉列表和 cdk-overlay-containers 的问题。有没有办法只将样式封装到这 1 个下拉列表中？
我现在无法访问我的计算机。但是您可以将一个类添加到包装 dmdiv 并定位它，或者如果组件中只有一个下拉菜单，则使用 :host 选择器。明天修改示例

【解决方案2】：

可以通过在 .mat-options 类中添加高度和填充 css 来控制。

.mat-option{
   height: 30px !important;
   padding: 0 5px !important;
}

【讨论】：