如何正确设置MatPaginator高度并解决内部控件适配问题

你之前的样式仅修改了分页器容器的最小高度，没有同步调整内部分页大小选择器、导航按钮、文本标签的尺寸、边距和对齐规则，才会出现下拉选择器错位、适配异常的问题。

• 样式生效前提：Angular Material组件默认存在视图封装，覆写样式建议写在项目全局样式文件（如src/styles.scss）中，若要写在组件样式文件内需要添加::ng-deep选择器穿透封装。
• 注意不要将分页器整体高度设置低于36px，否则交互元素点击区域过小，会影响可用性和无障碍访问标准。
• 完整适配样式（可按需调整高度、字号参数）：

/* 分页器根容器高度设置 */
.mat-paginator {
  height: 40px;
  display: flex;
  align-items: center;
}

.mat-paginator-container {
  min-height: unset !important;
  padding: 0 8px !important;
}

/* 分页大小选择器表单字段适配 */
.mat-paginator .mat-paginator-page-size {
  margin: 0 8px 0 0 !important;
  .mat-form-field {
    font-size: 12px;
    .mat-form-field-wrapper {
      padding: 0 !important;
      margin: 0 !important;
    }
    .mat-form-field-flex {
      padding: 0 8px !important;
      height: 28px;
      align-items: center;
    }
    .mat-form-field-infix {
      padding: 4px 0 !important;
      border-top: none !important;
    }
    .mat-select-arrow-wrapper {
      transform: translateY(0) !important;
    }
  }
}

/* 分页文本、导航按钮尺寸适配 */
.mat-paginator .mat-paginator-range-label {
  margin: 0 12px !important;
  font-size: 12px;
  line-height: 1;
}

.mat-paginator .mat-paginator-navigation-first,
.mat-paginator .mat-paginator-navigation-previous,
.mat-paginator .mat-paginator-navigation-next,
.mat-paginator .mat-paginator-navigation-last {
  width: 28px !important;
  height: 28px !important;
  .mat-icon-button {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    .mat-icon {
      font-size: 18px;
      width: 18px;
      height: 18px;
      line-height: 18px;
    }
  }
}

版本适配提示：如果使用的是Angular Material 15+的MDC版本分页器，组件类名前缀会带mat-mdc-，把上述代码里的mat-前缀替换为mat-mdc-即可正常生效。不要仅修改容器min-height属性，内部表单控件、按钮如果不同步调整尺寸和边距，会出现元素溢出、下拉面板定位偏移、表单下划线错位等问题。

内容的提问来源于stack exchange，提问作者eogabor