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)

Author: crisbeto

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

@@ -7,7 +7,10 @@
 @include mat-private-table-flex-styles();
 
 .mat-mdc-table-sticky {
-  @include vendor-prefixes.position-sticky;
+  // Note that the table can either set this class or an inline style to make something sticky.
+  // We set the style as `!important` so that we get an identical specificity in both cases
+  // and to avoid cases where user styles have a higher specificity.
+  @include vendor-prefixes.position-sticky($important: true);
 }
 
 // MDC Table applies `table-layout: fixed`, but this is a backwards incompatible

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

@@ -39,8 +39,8 @@
   backface-visibility: $value;
 }
 
-@mixin position-sticky {
-  position: -webkit-sticky;
-  position: sticky;
+@mixin position-sticky($important: false) {
+  position: -webkit-sticky #{if($important, '!important', '')};
+  position: sticky #{if($important, '!important', '')};
 }
 /* stylelint-enable */

src/material/table/table.scss

@@ -53,7 +53,10 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-table-sticky {
-  @include vendor-prefixes.position-sticky;
+  // Note that the table can either set this class or an inline style to make something sticky.
+  // We set the style as `!important` so that we get an identical specificity in both cases
+  // and to avoid cases where user styles have a higher specificity.
+  @include vendor-prefixes.position-sticky($important: true);
 }
 
 .mat-table-fixed-layout {