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.

[dkimmich-onventis]

I just checked again, with Angular v19.1.0 this issue doesn't seem to occur anymore for me. Not sure though which version fixed it.

[mrmokwa]

I don't think MD3 supports data tables and thus mouse hovering anymore.
Also, in the newest versions, there's nomore indigo & pink theme.

I checked the only example left with mouse hovering (which is in table expand) and it's woking in all themes (it's kindy ugly, and non functional color wise, but it works).

I'll be closing this issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}