Mat Blazor mat-expansion-panel remove elevation/border

Question

I want to remove the elevation/border from Mat expansion panel.

I've already read other related articles like mat-expansion-panel remove border but they are not working within Blazor.

I've tried to access the background-color property but MatBlazor is saying this property doesnt exist.

I've also tried using the class=".mat-elevation-z0" inside the Mat Expansion panel like this:

<MatExpansionPanel class=".mat-elevation-z0" @bind-Expanded="@panelOpenState">

Which Doesn't work.

At the minute the code looks like this:

<MatAccordion>
      <MatExpansionPanel>
          <MatExpansionPanelSummary>
              <MatExpansionPanelHeader>
                Personal data
              </MatExpansionPanelHeader>
              <MatExpansionPanelSubHeader>
                Type your name and age
              </MatExpansionPanelSubHeader>
          </MatExpansionPanelSummary>
        <MatExpansionPanelDetails>
              <MatTextField Label="First name"></MatTextField>
              <MatTextField Label="Age"></MatTextField>
          </MatExpansionPanelDetails>
      </MatExpansionPanel>
 </MatAccordion>

This makes a matblazor expansion panel appear on the page but with a shadow/elevation/border round it. i can't seem to get that to dissappear. I'm wondering if it is a specific blazor issue - as others using the matt expansion panel (with javascript, etc) seem to have work arounds?

Answer 1

Just override box-shadow css through Style parm:

<MatExpansionPanel Style="box-shadow: none;">

Try it at blazorfiddle.com