如何修复mat-paginator样式失效？mat-table分页粘性布局异常求助

I’ve faced this exact issue before when working with Angular Material’s mat-table and sticky columns—after scrolling the table, the custom styles I set for the paginator would stop rendering properly, even though the CSS looked correct. Here’s how to fix it:

Why This Happens #

1. View Encapsulation: Angular uses default view encapsulation for components, which means your custom CSS rules might not reach the internal elements of the mat-paginator component.
2. Positioning Behavior: Without explicit sticky positioning, the paginator can get displaced when scrolling the container, leading to styles not being applied as expected.

Step-by-Step Solution #

Update your CSS to address both encapsulation and positioning issues:

/* Use ::ng-deep to bypass Angular's view encapsulation */
::ng-deep .mat-paginator {
  background-color: brown;
  color: gold;
  font-size: 1rem;
  /* Keep paginator fixed at the bottom of its container */
  position: sticky;
  bottom: 0;
  /* Ensure it stays above table content during scroll */
  z-index: 100;
}

::ng-deep .mat-header-cell {
  font-size: 1rem;
  background-color: brown;
  color: gold;
}

.example-container {
  height: 460px;
  width: 550px;
  overflow: auto;
  /* Establish a positioning context for the sticky paginator */
  position: relative;
}

table {
  width: 800px;
}

What This Fix Does #

• ::ng-deep breaks through Angular’s component style isolation, making sure your custom styles apply to the internal elements of mat-paginator and mat-header-cell.
• position: sticky on the paginator keeps it anchored to the bottom of the .example-container as you scroll, so it stays visible and its styles remain consistent.
• z-index: 100 prevents table rows from overlapping the paginator during scrolling.

Your existing HTML structure is correct—just keep the mat-paginator inside the .example-container so it inherits the container’s positioning context.

After applying these changes, scrolling the table will keep the paginator fixed at the bottom with your custom styles fully intact.

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