Стайлинг Угловой Материал Пагинатор

Question

У меня есть пагинатор углового материала, который выглядит как

Я хочу оформить его, и он должен выглядеть как

У меня очень тяжелые времена, чтобы его стилизовать.Я просто мог перемещать элементы в paginator вокруг (начальную и конечную позиции), кроме этого я не мог ничего изменять.

Пожалуйста, дайте мне знать, как сделать требуемый стиль?

Вот ссылка на стек, https://stackblitz.com/edit/angular-tjhkpo

Answer 1

Используйте это css (для большего стиля откройте F12 и переопределите объявление материала):

См. Рабочий код

::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 2

Если вы используете отдельный стиль для компонентов и вам нужен стиль дочернего компонента, вам нужно использовать его в css стиле ::ng-deep перед стилем выбора дочернего компонента, например:

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