How to expand the header of a panel with css target

Question

I want the MudExpansionPanel's header to be a different color than the body of the panel's content.

MudExpansionPanel is assigned pink color in the Style property.

This will flip the entire panel (including when expanded). I just want to change the color of the title. How do I implement this?

EDIT: Sorry I didn't explain it clearly. I wanted the colors to be vibrant. So I want one panel to be pink, the other blue and so on.

Answer 1

First, add a custom CSS file to the project and register it in index.html or _Host.cshtml

Pay attention to the priority of the CSS file

Then press the style below Apply your desired style

.mud-expand-panel-header{
    color:pink;
}