angular / angular/components

bug(mat-text-column): Column-name based CSS ignored unless view encapsulation is disabled

Offen
#24,893 3 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/table P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

May not technically be a bug, and more of an undocumented quirk.

There are two aspects to mat-table column definitions that lead to an unexpected conclusion:

- For a column named `foo`, you can define a `.mat-column-foo` style which will get applied to it.
- A `mat-text-column` named `foo` is shorthand for an explicit matColumnDef with sensible defaults for a text-only field.

However, if you define said style, and try to apply it to a mat-text-column, it won't match.

I supppose that technically, the affected th/td elements are no longer generated by the parent view, but by mat-text-node itself - and thus, those are outside the scope of view-encapsulated styles defined there.

The fix may not be trivial, but it might still be worth documenting as a gotcha.

### Reproduction

See StackBlitz [here](https://stackblitz.com/edit/components-issue-e4h1lq?file=src/app/example-component.ts). By making the component non-encapsulated, the style applies to both columns. Otherwise, it only matches the explicitly defined one, not the text-column.

### Expected Behavior

Styles affect matColumnDefs and mat-text-columns the same way.

### Actual Behavior

...they don't!

### Environment

Angular CLI: 13.3.5
Node: 14.17.6
Package Manager: yarn 1.22.15
OS: win32 x64

Angular: 13.3.6

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verknüpften StackBlitz-Reproduktion und untersuche src/app/example-component.ts, wobei du die explizit definierte matColumnDef mit der mat-text-column unter view encapsulation vergleichst. Bestätige die Stilabweichung und ermittle, ob das beabsichtigte Ergebnis eine Behebung in der Komponente oder eine Dokumentation des Verhaltens ist; abgeschlossen bedeutet, dass beide Spaltentypen gleichwertige Stile erhalten oder die Einschränkung dokumentiert ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.