造型角材料分页器

Question

我有一个类似

的Angular Material Paginator

我想对其进行样式设置，它应该看起来像

我现在很难设计它的样式。我只能在分页器中的元素（开始和结束位置）周围移动，除此之外，我无法进行任何修改。

请让我知道如何进行所需的样式设置？

这是stackblitz链接https://stackblitz.com/edit/angular-tjhkpo

Answer 1

如果您为组件使用单独的样式，并且想要样式子组件，则在设置子组件选择器样式之前，需要先以css样式::ng-deep进行使用，例如：

::ng-deep .mat-select-value {
  border: 1px solid red!important;
}

Answer 2

使用此CSS（以获得更多样式，请打开F12并覆盖材质声明）：

See working code

::ng-deep .mat-paginator-page-size-select {
    width: 27px!important;
}
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline {
    background-color: transparent;
}

::ng-deep .mat-select-value {
  color: #005999;
    font-weight: bold;
    font-size: 15px;
}
::ng-deep .mat-select-arrow {
    color: #005999;
}
::ng-deep .mat-option{
  padding: 0!important;

}
::ng-deep .mat-option-text {

    text-align: right;
}

Answer 3

使用 ::ng-deep 时，请尝试添加更多限制性选择器，以便降低副作用的风险，例如

::ng-deep {
  .mat-select-panel[aria-label="Items per page:"] {
    .mat-option-text {
      font-size: 1.4rem;
    }
  }
}