How to fix mat-paginator size

Question

In mat-table for pagination, there is no flexibility for sticky-table. In pagination after move there is no css is apply (as shown in images). I tried to give a background color but it is not working. refer this code : https://stackblitz.com/angular/bbmgqanjelq?file=app%2Ftable-sticky-columns-example.css

.mat-paginator{
    background-color: brown;
    color: gold;
    font-size: 1rem;
}

.mat-header-cell{
    font-size: 1rem;
    background-color: brown;
    color: gold;
  }
.example-container {
  height: 460px;
  width: 550px;
  overflow: auto;
}
table {
  width: 800px;
}

<div class="example-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">

    <!-- Name Column -->
    <ng-container matColumnDef="name" sticky>
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef> Weight </th>
      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>

<!-- Star Column -->
    <ng-container matColumnDef="star" stickyEnd>
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <mat-icon>more_vert</mat-icon>
      </td>
    </ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

<mat-paginator [length]="50" [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons>
</mat-paginator>
</div>

if we move the table paginator should look same as before.

Answer 1

Okay I'm adding another answer because this one is totally different from the previous one.

You can use the Angular renderer along with view children to incread the size of the paginator to the size of the table.

Here is the stackblitz demo : https://stackblitz.com/edit/angular-mxdsdk-d2b7xa?file=app/table-sticky-columns-example.ts

As you can see, the paginator gets the total size of the table and is displayed on the right. Not sure you want it, but it gives you a new way of using it.

 <table mat-table [dataSource]="dataSource" #table>
 ...
 <mat-paginator sticky #paginator></mat-paginator>

@ViewChild('table', { static: true, read: ElementRef }) table: ElementRef<HTMLDivElement>;
@ViewChild('paginator', { static: true, read: ElementRef }) paginator: ElementRef<HTMLDivElement>;

constructor(
  private renderer: Renderer2
) {}

ngOnInit() {
  const width = this.table.nativeElement.getBoundingClientRect().width;
  this.renderer.setStyle(this.paginator.nativeElement, 'width', width + 'px');
}