How to target the header of the mudexpansionpanel with css

Question

I want the header of the MudExpansionPanel to be a different colour to the body of the content on the panel.

The MudExpansionPanel has the colour pink assigned in the Style attributes.

<MudExpansionPanel Text="Heading text" Style="@($"background-color:pink; color:black">

This turns the entire panel (including when it is expanded). I just want the heading to change colour. How could I implement this?

Edit: Sorry I didn't explain myself too well. I want the colour to be dynamic. So for one panel I want it to be pink and for another blue ect..

Answer 1

Solution:

To get the header a colour I wrote:

 <MudExpansionPanel Text="Panel Heading" Style="@($"background-color:{@changingVaraible1}; color:{@changingVaraible2};")" IsInitiallyExpanded="false">

To get the expanded rest of the panel white:

CSS:

.mud-collapse-wrapper-inner { 
    background: white;
}