如何删除 mat-select-panel 中的填充-解网

问：

如何删除马选择面板的此填充。

我试过使用

ng:deep .mdc-menu-surface.mat-mdc-select-panel {
padding: 0px !important;
}

但我就是无法删除它。

任何帮助将不胜感激，提前感谢您的帮助。

Angular-Material Mat-Select Mat-form-Field 材料

BAAAAD：：：ng-deep .mat-mdc-select-panel { padding： 0 ！important;GOOOD：理想情况下是命名空间到正文标签。但是现在让我们减少破坏性，并如下所示将类添加到组件中。<mat-select panelClass=“myClass”> 并将其添加到根样式中： .myClass { &.mat-mdc-select-panel { padding： 0; background： red; } }

答：

1赞 Eliseo 8/29/2023 #1

看到 mat-select 创建一个 cdk-overlay。这意味着“面板”在组件的“外部”，实际上在整个应用程序之外。

这就是您需要使 .css 以任何方式“全局”的原因。

我通常使用样式.css（不是组件.css）

div.mat-mdc-select-panel
{
    padding:0;
}

如果您不希望将此 .css 应用于应用程序中的所有 mat-select 是当您使用属性时，这允许您编写panelClass

<mat-select panelClass="custom-select">
   ...
</mat-select>

并使用

.custom-select.mat-mdc-select-panel {
  padding:0;
}

它还有另一个选项

encapsulation: ViewEncapsulation.None

但我不太喜欢，因为这使得组件中的所有.css都应用于所有应用程序 - 在您的样式中.css包含组件是相同的.css

如何删除 mat-select-panel 中的填充

How to remove padding in the mat-select-panel

评论

评论