Angular4 Material 主题在 ASP.NET Core 项目上无法正常工作

Question

我刚刚使用本网站上提到的 ASP.NET Core Angular SPA 模板创建了一个项目：Building Single Page Applications on ASP.NET Core with JavaScriptServices

之后，我添加了@angular/material、@angular/cdk 和@angular/flex-layout npm 包。

我使用 Angular Material 工具栏和菜单制作了一个非常简单的页面。 我在 _Layout.cshtml 上链接了 Pink-BlueGrey.css 预建主题（手动将 css 文件复制到 wwwroot 以使事情变得简单）。

结果是所有 Angular Material 组件现在都设置了样式，但是每个不包含在材质组件中的 html 都没有设置样式。我不明白为什么。因为如果我使用 Angular CLI 创建一个项目，一切都会按照预期的方式进行。

我选择的这个主题有一个深色背景。我需要字体是白色的，这样人们才能阅读。但这不是 ASP.NET Core 项目正在发生的事情。

我认为这可能是一个 webpack 配置问题。我试图从 _Layout.cshtml 中删除指向 css 文件的链接，并将其添加到 webpack.config.vendor.js 中的供应商包中。但结果是一样的。它有效，但不是我想要的方式。

这应该发生吗？这是设计使然吗？我是否应该编写一个 CSS 文件来设置 Angular Material 组件中不包含的所有 HTML 样式？

我试图通过从 _ViewImports.cshtml 中删除“Microsoft.AspNetCore.SpaServices”tagHelper 和从 Index.cshtml 中删除 asp-prerender-module 指令来禁用服务器端预渲染。一切都保持不变。不知道怎么回事。

我是网络开发的新手，我认为这应该很简单。但我找不到任何人遇到过这种确切的设置和问题。

Answer 1

所以，问题在于我对 Angular CLI 的看法是错误的。我用它制作的项目正在使用 mdSidenav。当我用一个简单的 div 替换 md-sidenav-container 指令并删除 sidenav 组件的那一刻，Pink-BlueGrey 的深色背景消失了，我的所有文本又变成了黑色。我在 ASP.NET Core 项目中的行为相同。所以这不是 ASP.NET Core 设置的问题。

我决定用来解决上述问题的方法，不是将“mat-app-background”类放在body标签中，而是必须使用材质容器页面中的每个文本，我都在根应用程序组件上使用了 md-sidenav-container 指令。我没有使用 sidenav 本身。只是它是一个容器，因此使用的每个文本，即使它只是一个 h1 标签，也会被样式化，因为它包含在一个材质组件中。

也许这不是最优雅的解决方案。所以如果有人有更好的建议......