Angular Material 组件样式不起作用答案

【问题标题】：Angular Material component styles are not workingAngular Material 组件样式不起作用
【发布时间】：2021-02-07 03:24:34
【问题描述】：

我已将 Angular Material 安装到我的一个 Angular 应用程序中，尽管我在 angular.json 文件中添加了样式链接，但组件的样式不起作用。这是 angular.json 文件的样式数组的样子：

    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
    ],

我尝试上下切换样式文件路径，如下所示。

    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],

当我将 Bootstrap 路径移动到数组末尾时，Material 样式有效，但 Bootstrap 停止工作。

我的 CLI 和应用信息如下：

Angular CLI: 11.0.0-rc.0
Node: 12.16.3
OS: darwin x64

Angular: 11.0.0-rc.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.0-rc.0
@angular-devkit/build-angular   0.1100.0-rc.0
@angular-devkit/core            11.0.0-rc.0
@angular-devkit/schematics      11.0.0-rc.0
@angular/cdk                    10.2.5
@angular/material               10.2.5
@schematics/angular             11.0.0-rc.0
@schematics/update              0.1100.0-rc.0
rxjs                            6.6.3
typescript                      4.0.3

请帮我解决这个问题。

【问题讨论】：

标签： angular bootstrap-4 angular-material

【解决方案1】：

你好@Shafkhan，不建议混淆 css 框架。因为他们可能有冲突的css。在我看来，您应该在 Angular 材料或引导程序之间进行选择。

【讨论】：

谢谢，但我在所有其他应用程序中都使用了它。我只为这个应用更新了我的 CLI，现在它给了我这个错误。
那么提供工作版本的组合（Angular + Angular Material + Bootstrap）和不工作版本的组合将是一个非常有用的信息。此外，您期望/看到的一些日志或准确的孤立屏幕截图示例也会有所帮助。
@CélianGarcia 我在同一个项目中使用了角度材料、引导程序和 ngbootstrap。他们都没有冲突的CSS。 :) 所以，一起用也没关系
好吧，蒂娜 :) 维持对我来说听起来很痛苦。此外，在设计方面，您必须注意外观和感觉仍然一致。我想这取决于您使用的每个功能！

【解决方案2】：

在您的 styles.ccs 文件中添加这两行：

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

是的，您可以同时使用 angular material 和 bootstrap。 :)

【讨论】：

成功了，非常感谢！但是你知道为什么我在 angular.json 文件中使用这些路径时它不起作用的原因吗？