bug(material/table): mouse hover not working with indigo & pink

[mrmokwa]

Description

You can check at the table examples in material.io:
https://material.angular.io/components/table/examples

• Deep-purple & Amber
• Indigo & Pink
• Pink & Blue-Grey
• Purple & Green

The talbe hovering effect doesn't work with Indigo & Pink theme.
Custom light-theme seens to not being working too.

Example:

Reproduction

Steps to reproduce:

1. Select in material.io table examples the indigo and pink theme
2. Hover over the row and nothing happens.
3. Select in material.io table examples the deeo purple and amber theme
4. Hover over the row, and the styling is applied.

Environment

• Angular: 15
• CDK/Material: 15
• Browser(s): Chrome and Firefox

[ChristofferGersen]

I expect the hover not to be visible, given the following lines from table.scss

// 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;
}

This does not always work, since it has the same specificity als the mdc theme selector:
.mdc-data-table__row:not(.mdc-data-table__row--selected):hover

As a result the styles apply in declaration/load order. "Indigo & Pink" is probably the default theme, and the other themes are loaded later on demand. Since loading another theme does not include table.scss again, the mdc theme will enable mouse hover again.

[dkimmich-onventis]

I'm facing the same issue, but with a custom theme. In my case there is no hover effect in the development server, but in production there is one.