Как настроить CSS для пагинатора угловых материалов?

Question

Я хочу изменить внешний вид Angular Material Paginator по умолчанию.Например, я хочу изменить свойство justify-content на flex-start.

.mat-paginator-container {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 56px;
padding: 0 8px;
flex-wrap: wrap-reverse;
width: 100%;}

То, что я сделал, - вставил ниже CSS в файл styles.css

.mat-paginator-container {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 56px;
padding: 0 8px;
flex-wrap: wrap-reverse;
width: 100%;}

Но это не сработало.Я также попробовал CSS в файле CSS компонента.Но это тоже не сработало.Так как я могу изменить CSS?

ОБНОВЛЕНИЕ

Оказывается, что я должен был использовать! Важно, и это сработало !.Я избегал этого, но другого выбора не было.Любые лучшие решения, пожалуйста, дайте мне знать.

Answer 1

Добавив! Важно в CSS, я не смог.Итак, я сделал это в файле app.component.css:

.mat-paginator {
     display: flex;
     justify-content: center;
 }

Но вы можете жаловаться, что, возможно, вы не хотите, чтобы paginator был "flex".Вы можете поместить пагинатор отверстий в тег div, чтобы убедиться, что он будет отображаться в виде блока:

В app.component.html:

  ...
     <div class="container">
         <mat-paginator>
              ......
         </mat-paginator>
     </div>
  ... 

PS: Добавление! Важный не хорошая идея.

Answer 2

Вы можете использовать :: ng-deep, чтобы изменить стиль mat-paginator

:host ::ng-deep.mat-paginator .mat-paginator-container{
  justify-content: flex-start;
}