Upgrading to Material 15 for an Angular project is causing issues with styling now that they are MDC-based components. I'm trying to understand the best way to map the old styles to new. Does this mean we need to now add more custom CSS classes and more customized and overwritten Material classes?
For example,
Chips has undergone a complete rewrite according to the docs - "mat-chip-listbox with mat-chip-option — this is the closest to the original interaction pattern."
Prior to Material15
<mat-chip-list>
<mat-chip>
<span>Test1</span>
<span>abc</span>
<span>xyz</span>
<mat-chip>
<mat-chip-list>
After Upgrade
<mat-chip-listbox>
<mat-chip-option>
<span>Test1</span>
<span>abc</span>
<span>xyz</span>
<mat-chip-option>
<mat-chip-listbox>
After upgrading to 15, there are additional span elements and classes being added for the same code. Since mat-chip-option does not have the same styles applied as mat-chip, should we overwrite mdc-evolution-chip__text-label or mat-mdc-chip-action-label as these are the new classes added to the span?
Before upgrade
After upgrade
.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) is overriding custom css class