Angular4 Material theme not working properly on ASP.NET Core project

Question

I've just created a project using the ASP.NET Core Angular SPA template mentioned on this site: Building Single Page Applications on ASP.NET Core with JavaScriptServices

After that, I added the @angular/material, @angular/cdk and the @angular/flex-layout npm packages.

I made a pretty simple page using an Angular Material toolbar and a menu. I linked the Pink-BlueGrey.css prebuilt-theme on the _Layout.cshtml (manually copied the css file to wwwroot to make things simple).

And the result is that all the Angular Material components are now styled, but every html that is not contained within a material component, stays not styled. I don't understand why. Because if I create a project using Angular CLI, everything works the expected way.

This theme that I have chosen, has a dark background. I need the font to be white so that people can read. But that is not what's happening on the ASP.NET Core project.

I think that maybe this is a webpack configuration problem. I have tried to remove the link to the css file from the _Layout.cshtml and added to the vendors bundle in the webpack.config.vendor.js. But the result is the same. It works, but not the way I want.

Is this supposed to happen? Is this by design? Am I supposed to write a CSS file that styles all HTML that is not contained within an Angular Material component?

I have tried to disable the Server Side Pre-rendering by removing the "Microsoft.AspNetCore.SpaServices" tagHelper from the _ViewImports.cshtml and the asp-prerender-module directive from the Index.cshtml. Everything stays the same. I don't know what is wrong.

I am new to web-development and I think that this should be simple stuff. But I can't find anyone that has had this exact setup and problem.

Answer 1

So, the thing is that I was wrong about the Angular CLI. The project that I have made with it, is using mdSidenav. The moment I replaced the md-sidenav-container directive with a simple div, and removed the sidenav component, the Pink-BlueGrey's dark background vanished, and all my text became black again. The same behavior I was having with the ASP.NET Core project. So it is not an issue with the ASP.NET Core setup.

The approach that I decided to use to solve the problem described above, is to instead of putting the "mat-app-background" class in the body tag, and have to use material containers for every text in the pages, I used a md-sidenav-container directive on the root app component. I'm not using the sidenav itself. Just it's container so that every text used, even if it's just an h1 tag, will be styled because it is contained in a material component.

Maybe that is not the most elegant solution. So if someone have a better suggestion...