css - Angular Material 样式未正确应用

Question

我刚刚添加了 styles.css 文件，但该元素是使用 scss 样式配置创建的。我不知道如何让样式恢复到我的控件上。

Answer 1

当应用程序样式表在 Angular 应用程序中更改时，对 Material 主题的引用可能位于安装 Material 时包含导入主题的原始样式表中。这可以解释为什么构建和渲染的组件脚本不包含仍在原始样式表中的 Material CSS。

要解决此问题，请尝试以下操作之一:

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

1. 在 Angular.json 中，在样式部分中添加 Material 主题 CSS 文件:

   “样式”:[ “./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”；

重新构建应用程序，以便将引用的样式捆绑到脚本中。