Skip to content

Commit 760fb30

Browse files
crisbetoannieyw
crisbeto
authored and
annieyw
committed
fix(material/table): increase specificity on sticky selector (#21403)
The sticky styles were switched to a class in #19823 which has a very low specificity. As a result, there's a high chance of it being overwritten by some user styles. These changes use `!important` so that we get a similar specificity as when the styles were being set inline before #19823. Fixes #20558. (cherry picked from commit 1f18750)
1 parent 748072d commit 760fb30

3 files changed

Lines changed: 11 additions & 5 deletions

File tree

‎src/material-experimental/mdc-table/table.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
@include mat-private-table-flex-styles();
88

99
.mat-mdc-table-sticky {
10-
@include vendor-prefixes.position-sticky;
10+
// Note that the table can either set this class or an inline style to make something sticky.
11+
// We set the style as `!important` so that we get an identical specificity in both cases
12+
// and to avoid cases where user styles have a higher specificity.
13+
@include vendor-prefixes.position-sticky($important: true);
1114
}
1215

1316
// MDC Table applies `table-layout: fixed`, but this is a backwards incompatible

‎src/material/core/style/_vendor-prefixes.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
backface-visibility: $value;
4040
}
4141

42-
@mixin position-sticky {
43-
position: -webkit-sticky;
44-
position: sticky;
42+
@mixin position-sticky($important: false) {
43+
position: -webkit-sticky #{if($important, '!important', '')};
44+
position: sticky #{if($important, '!important', '')};
4545
}
4646
/* stylelint-enable */

‎src/material/table/table.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,10 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
5353
}
5454

5555
.mat-table-sticky {
56-
@include vendor-prefixes.position-sticky;
56+
// Note that the table can either set this class or an inline style to make something sticky.
57+
// We set the style as `!important` so that we get an identical specificity in both cases
58+
// and to avoid cases where user styles have a higher specificity.
59+
@include vendor-prefixes.position-sticky($important: true);
5760
}
5861

5962
.mat-table-fixed-layout {

0 commit comments

Comments
 (0)