Question 209790 in CSS Question posted in
Some basic documentation can be found here.

How to target the header of the mudexpansionpanel with css

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?

Tags:

2

Answers


  1. 0

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

    Pay attention to the priority of CSS files

    Then apply your desired styles as below

    .mud-expand-panel-header{
    color:pink;
}
    Login or Signup to reply.
  2. 0

    To answer your question specifically, in addition to Taqi ツ above, you can target the elements inside the MudExpansionPanel element like this:

    .mud-expand-panel-header *{ /* this target all element inside mud-expand-panel-header*/
  color: black; /*specify the color add !important if needed*/
}

    Instead of ‘*’ above, you can use class or other valid identifier.

    .mud-expand-panel-header div { /* or . */
  color: black;
  background: white;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search