网站搜索

css - Angular Material 样式未被正确应用


我刚刚添加了 styles.css 文件,但项目是用 scss 样式配置创建的。我不知道如何让样式在我的控件上恢复。

答案#1

当 Angular 应用中的应用样式表被更改时,对 Material 主题的引用很可能存在于最初包含导入主题的原始样式表中,这是在安装 Material 时生成的。这可以解释为什么构建和渲染的组件脚本不包含仍然存在于原始样式表中的 Material CSS。

要解决此问题,请尝试以下方法之一:

当在应用程序的以下区域之一中包含 Angular Material 主题时,它是可见的:

  1. 在 Angular.json 的 styles 部分中添加 Material 主题 CSS 文件的位置:

    "styles": [ "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.css" ],

  2. 在 styles.css 中按如下方式导入其中一个 Material CSS 主题:

    @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

重建应用程序,以便引用的样式被打包到脚本中。