Adding classes to material components is fundamentally broken

[exo-pla-net]

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

It's common to want to, say, change the font size on a Material Component.

Material Components claims to accommodate this need by allowing users to apply additional css classes to components.

However, everything except for the basic "[color]='primary'" inputs on material components is broken.

Exhibit A: Snack Bars

Per the docs, you can apply additional classes with "panelClass".

A developer might want red text with their error popups, and thus specify:

> admin.component.ts

this._snackBar.open((e as Error).message,"Error", {
        duration: popupDuration,
        panelClass: 'errorPopup'
})

And in their css:

> admin.component.scss

.errorPopup{
  color: red !important
}

However, this will do nothing. Nothing at all.

Exhibit B: Tabs

Per the docs, with bodyClass, you can specify "Classes to be passed to the tab mat-tab-body container. Supports string and string array values, same as ngClass."

But if you try to pass in a class, as we did with errorPopup above, it will do nothing. Same for the labelClass specified in the docs: it's also a red herring that will do nothing.

Workaround

You can effectively hack material components. You can inspect elements in the browser, find relevant classes, and directly manipulate them. Here's, for instance, how I changed the "active tab" css for Material Tabs in my Sign In component:

> styles.scss

app-sign-in .mat-mdc-tab-header{
  // hide the "active" underline
  --mdc-tab-indicator-active-indicator-height:0px;
}
app-sign-in .mdc-tab--active{
 // make the active tab white
  background-color: white;
}

I understand that maybe you can get class-injection to work as specified in the docs, if you're willing to turn off View Encapsulation.

This is a sorry way to do things. Surely we can come up with a better way to let users customize Material Components.

Reproduction

Attempt to add a class to a Material Component, as above.

Expected Behavior

The classes in my .scss files to be applied to Material Components, when I inject them as specified in the docs.

Actual Behavior

Not a darn thing.

Environment

Angular CLI: 16.0.0
Node: 18.15.0
Package Manager: npm 9.5.0
OS: win32 x64

Angular: 16.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.1600.0
@angular-devkit/build-angular 16.0.0
@angular-devkit/core 16.0.0
@angular-devkit/schematics 16.0.0
@angular/fire 7.5.0
@schematics/angular 16.0.0
rxjs 7.8.1
typescript 4.9.5

[mmalerba]

It sounds like the primary issue here is that the styles targeting Angular Material components are being added in components that have ViewEncapsulation enabled, rather than Angular Material not adding the classes. This is expected, as that's how ViewEncapsulation works in Angular. There are several ways to get around it if you want to apply custom styles to Angular Material components:

1. Disable ViewEncapsulation on the component that's setting the style
2. Add the styles in a global stylesheet, rather than in the stylesheet of a component that has ViewEncapsulation turned on
3. The style can be set from a component with ViewEncapsulation enabled by using ::ng-deep

[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.}