在不使用 ng-deep 的情况下减小 mat-paginator 的箭头大小答案

【问题标题】：Reducing arrow size of mat-paginator without using ng-deep在不使用 ng-deep 的情况下减小 mat-paginator 的箭头大小
【发布时间】：2023-01-11 16:30:04
【问题描述】：

我在我的项目中使用了 mat-paginator 并想减小分页箭头的大小不使用 ng-deep

screenshot of mat-paginator result

目前我可以使用以下代码来做到这一点：

::ng-deep .mat-paginator-icon {
    width: 3vh;
    margin-top: -0.5vh;
  }

但是必须在不使用 ng-deep 的情况下做到这一点！有什么建议么？

我试过了封装：ViewEncapsulation.None并取得了成果，但这正在影响/扰乱该网页上的其他 UI 功能

【问题讨论】：

令我感到非常惊讶的是，您正在使用单位vh 来更改图标的宽度。这意味着根据视口的高度，图标将具有不同的大小。例如，在横屏模式的手机上，图标几乎看不到。

标签： angular-material ng-deep

【解决方案1】：

向你的 mat-paginator 添加一些类，比如

<mat-paginator class="a-c"></mat-paginator>

然后在你的全局style.css中使用这个类来应用样式

.a-c .mat-paginator-icon {
    width: 3vh;
    margin-top: -0.5vh;
  }

【讨论】：