Angular material-expansionpanel title style

Issue

I want to change the title style of the Angular Dart material-expansionpanel.

enter image description here

If I use the following CSS, the content style change (p.ex. radio group) but the title does not change style.

material-expansionpanel {
  font-weight: bold;
}

What do I need to do to change the style of the title?

Solution

Since the style is encapsulated you need to use one of our mixins or ::ng-deep to break the encapsulation. Since there isn’t a mixin for this you can do.

:host ::ng-deep header .primary-text {
  font-weight: bold;
}

The :host is to keep the scope to the current component so it doesn’t leak out. ::ng-deep breaks encapsulation and the rest is the selector.

Answered By – Ted Sander

Answer Checked By – Willingham (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.