angular - Angular MatAccordion 默认显示为平面

Question

我在我的应用程序中使用 mat-accordion 组件，但是即使此处的文档中明确说明了它-> https://material.angular.io/components/expansion/overview#expansion-overview默认显示模式是边框+提高。当我在我的应用程序中从上面的链接运行扩展面板的示例代码时，它显示为平面。当我尝试将 displayMode 属性显式设置为“默认”时，它显示为平面。我错过了什么？

Answer 1

很可能其他东西正在覆盖您的CSS。当 css 从其他组件中使用::ng-deep, :host等时，可能会发生这种情况。!important甚至在封装样式上的使用可能会被覆盖。这只是一个猜测。

这增加了凸起的效果。将此添加到您的组件样式表中，并观察是否返回正常的视觉效果。

.mat-expansion-panel:not([class*=mat-elevation-z]) {
    box-shadow: 0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f !important;
}

如果他们返回，那么某些东西确实会覆盖材料默认 css。找到问题并解决它。