调整mat-option元素的宽度（较短）

Question

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

基本上，我需要所有3个下拉项在此StackBlitz HERE上的宽度实际上为100px。

编辑

我仍然需要帮助

@David的答案非常接近，在不使用:host的情况下设置cdk-overlay-container的样式存在一些问题。

我无法使用:host，因为它会在不希望出现的情况下影响屏幕上的其他下拉菜单。

Answer 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

修改

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

我创建了一个示例，该示例向/从叠加层添加/删除自定义类，以使样式不会泄漏到其他选择的组件。

有点hack，它们可能是更好的解决方案（也许如果您创建自己的覆盖图）

当您打开/关闭选择项时，它仍然无法完美运行

Stackblitz demo

Answer 2

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

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