Bug - tr background color for table-active when used with table-striped

[tnguyen14]

In version 5.0.0, the table-active class, when applied to a tr, is superseded by a table-striped class on the table.
As can be seen in the codepen below, the first row background color is still var(--bs-table-striped-bg), instead of var(--bs-table-active-bg)
The same is not happening when table-active class is applied to a td.

This issue is not present in version 4.6.0.

• Operating system and version (Windows, macOS, Android, iOS): Windows
• Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser): Edge
• A reduced test case or suggested fix using CodePen or JS Bin: https://codepen.io/tridnguyen/pen/WNpvdPy

[ffoodd]

Probably fixed by #33825, need to check.

[ffoodd]

So, just checked and #33825 does not solve this.

I think we'd need some custom cascade here, just like @mirisuzanne explained in a CodePen.

[bavoco]

Although it's not an elegant solution, this could be solved by increasing the specificity of .table-active.

Changing it to
.table-active.table-active.table-active, .table-active.table-active.table-active > * { ... }

makes it have a higher specificity than the .table-striped selector.

[kant2002]

I have no idea why so many .table-active so solve that by applying to my customization file.

.table-striped > tbody > tr.table-active:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--bs-table-active-bg);
}