Angular 调整mat选项元素的宽度（较短）

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

基本上，我需要所有3个下拉项目实际上是100px的这个StackBlitz宽

编辑 我仍然需要帮助

@David的答案非常接近，只是在没有

：host的情况下设置cdk覆盖容器的样式存在一些问题

我不能使用
：host
，因为它会影响屏幕上的其他下拉列表，而这并不是我想要的。
可能有更好的方法，但只要使用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;
}


编辑

这确实是一个问题：覆盖层容器对于材质组件是通用的。因此，如果您按照上面的方式设置样式，CSS规则将应用于所有选定组件。此外，覆盖容器位于组件本身之外，因此不能使用顶级选择器限制规则，如
：host

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

这有点像黑客，它们可能是更好的解决方案（如果您创建自己的覆盖）

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

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

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

你不能只使用CSS和更精确的选择器（因为它获得优先权）或使用
！重要信息
？不太重要，你能帮我吗。。主要问题之一是+32px。或者至少我找不到正确的类，因为动画的快速性等等。我知道css和！重要但没有任何运气。这个transformPanel不是最容易覆盖的元素这是你想要的吗？这可能有助于您调试：在Chrome中，您可以减慢甚至停止动画，以便在特定时间检查元素：当使用
mat select
时，我发现只需在
mat表单字段中添加一个自定义类并将该类作为目标非常有用，然后您就可以删除
填充，
边距
并设置
宽度
；我的结局是这样的这很好。。我可以接受它，但当我去实现它时，我遇到了：：ng deep影响其他下拉列表和cdk覆盖容器的问题。。有没有办法将样式封装到这个1下拉列表中？我现在无法访问我的计算机。但您可以向包装dmdiv添加一个类并将其作为目标，或者如果组件中只有一个下拉列表，则使用：host selector。我明天修改这个例子