Search code examples
dartangular-material2angular-dartangular-components

Angular material-expansionpanel title style


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.