Can you change Angular mat-expansion-panel text/font colors?

Question

I cannot change the text color in the mat-expansion-panel?

I've got an app with a mat-expansion-panel. I can change the background colors, etc, using .mat-expansion-panel-header, but nothing i do seems to affect the text color of the title. Trying to go from the default color white background black text, to a dark blue background (which i can do) and white text (which i cannot).

I've tried varieties of options with -label, -text, and -typography, etc and no change.

/deep/ .mat-expansion-panel-header-label,
.mat-expansion-panel-header-label.mat-expanded,
.mat-expansion-panel-header-label.mat-expanded:hover {
  background: white;  

}

I've tried numerous versions of things as shown above but get nothing. The basic expectation is the text comes out white instead of black.

Which css/scss file are you targeting those classes in? Styles are scoped so it may be that you are targeting classes outside of your component. — Ashley
i'm using the app.component.scss file. I've looked trying to find out of that is the case and it can't be changed there but haven't found anything on it.. — Mike
If I were you I would change it in my main scss file and see if that solves the issue. If so, it is a scoping issue, and then you can decide how you want to handle it. If not then it's more likely you are targeting the classes incorrectly. — Ashley
I've looked at the main, and it doesn't refer to label, it refers to typography which makes me think you're probably right. — Mike

tommueller tommueller · Accepted Answer · 2019-05-21T12:37:31

If you are using the latest version of Angular Material (7), then this should do the trick:

.mat-expansion-panel-header-title {
  color: red
}

also see the stackblitz here: https://stackblitz.com/edit/angular-cnasgn

Can you change Angular mat-expansion-panel text/font colors?

1 Answers