fix(material-experimental/mdc-table): add background color; disable hover styles; fix sticky columns (#22723)

* fix(material-experimental/mdc-table): add background color; disable hover styles; fix sticky columns

* fix(material-experimental/mdc-table): lint

* fix(material-experimental/mdc-table): extra line

Author: andrewseguin

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

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/data-table/data-table' as mdc-data-table;
 @use '@material/data-table/data-table-theme' as mdc-data-table-theme;
@@ -41,6 +42,11 @@
   mdc-data-table-theme.$sort-icon-color: $orig-sort-icon-color;
   mdc-data-table-theme.$sort-icon-active-color: $orig-sort-icon-active-color;
   mdc-data-table-theme.$stroke-color: $orig-stroke-color;
+
+  .mat-mdc-table {
+    $background: map.get($config, background);
+    background: theming.get-color-from-palette($background, 'card');
+  }
 }
 
 @mixin typography($config-or-theme) {

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

@@ -17,7 +17,7 @@
 // change since the table did not previously apply it.
 // TODO: Add a mixin to MDC to set the layout instead of including this override,
 // see this issue: https://github.com/material-components/material-components-web/issues/6412
-.mdc-data-table__table {
+.mat-mdc-table {
   table-layout: auto;
 }
 
@@ -27,3 +27,18 @@
 mat-row.mat-mdc-row, mat-header-row.mat-mdc-header-row, mat-footer-row.mat-mdc-footer-row {
   border-bottom: none;
 }
+
+// Cells need to inherit their background in order to overlap each other when sticky.
+// The background needs to be inherited from the table, tbody/tfoot, row
+// (already set in MDC), and cell.
+.mat-mdc-table tbody, .mat-mdc-table tfoot,
+.mat-mdc-cell, .mat-mdc-footer-cell {
+  background: inherit;
+}
+
+// Disable hover styling while MDC uses an opacity for its color.
+// When the hover style is used with sticky cells, the opacity shows the cells overlapping.
+.mat-mdc-table .mat-mdc-row:hover,
+.mat-mdc-table .mat-mdc-footer-row:hover {
+  background-color: inherit;
+}