Angular 10 : mat-elevation-z is not working for any component

标签 angular angular-material angular10

我在 mat-toolbar 和 mat-card 元素中使用类 mat-elevation-z4,但它根本不起作用。即使我没有在这些元素中应用任何其他 CSS。

版本:
Angular CLI:10.0.6
节点:10.14.2
操作系统:win32 x64
Angular :10.0.9

该应用程序在 Chrome 桌面上运行,我也在 Firefox 中尝试过。

我用它来尝试修复:但它只在工具栏中有效并产生了其他错误:

.antiBug {
    position: relative;
    z-index: 2;    
}

我的垫卡:

<mat-card class="mat-elevation-z4">
    <mat-card-title class="title">Bem vindo!</mat-card-title>
    <mat-card-subtitle class="subtitle">
        Sistema para exemplificar a construção de um cadastro em Angular
    </mat-card-subtitle>
</mat-card>

我不想盲目安装旧版本的 Angular 以希望问题消失。

我该如何解决这个问题?

PS:巧合的是,在同一个项目中我有 Material 按钮,它们的样式都有效,除了 mat-rised-button,它是“3D”的。看起来 Angular 在控制 z-index 时遇到了一些问题......

看看我的工具栏的类 mat.elevation-z8

enter image description here

在这里,和我的垫子卡一样

enter image description here

最佳答案

我遇到了类似的问题,但事实证明,当我安装 Angular Material 时,它没有添加 "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css" 到我的 angular.json 样式部分,在构建部分内。

Style section of the angular.json file

添加这段代码后,一切正常!

关于 Angular 10 : mat-elevation-z is not working for any component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63430415/

相关文章:

angular - 选择路由器链接时,所有设备的侧边导航都将关闭

HTML 5 Angular 10 : Display array attribute values using EXL

angular - 没有 npm 更新 Angular 10 的 git 新分支

node.js - Express 路由器无法处理发布请求?

angular - 如何将默认 -(连字符)填充到空单元格

Angular 2禁用清理

javascript - Angular Firebase 如何按字段查找和检索数据

angular - 如何制作单独的 Angular Material 步进器标题和内容?

angular - 从下拉列表中选择自定义选项后如何启用输入文本框?

javascript - 如何在 Angular 10 中修补动态表单数组的值?