删除 Mat Blazor 垫扩展面板 elevation/border

Question

我想从 Mat 扩展面板中删除 elevation/border。

我已经阅读了其他相关文章，例如 mat-expansion-panel remove border，但它们在 Blazor 中不起作用。

我尝试访问背景色属性，但 MatBlazor 说属性不存在。

我也试过在 Mat Expansion 面板中使用 class=".mat-elevation-z0" ，如下所示：

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

哪个不起作用。

目前代码如下所示：

<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>

这使得 matblazor 扩展面板出现在页面上，但带有阴影/elevation/border。我似乎无法让它消失。我想知道这是否是一个特定的 blazor 问题 - 因为其他人使用亚光扩展面板（javascript 等）似乎有解决方法？

Answer 1

只需通过 Style 参数覆盖 box-shadow css：

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

在 blazorfiddle.com

试试

删除 Mat Blazor 垫扩展面板 elevation/border

Mat Blazor mat-expansion-panel remove elevation/border

blazor

matblazor