bug(mat-form-field): mat-form-field inputs not rendering properly when deployed

[RobertWoehr]

Reproduction

Steps to reproduce:

1. Add form markup to template file using mat-form-field elements with input elements displaying the 4 different appearances.
2. View app in browser.

https://stackblitz.com/edit/angular-ivy-gl3pev

Expected Behavior

What behavior were you expecting to see?

I expect the mat-form-fields of the deployed app to render exactly as they do when the app in run locally.

Actual Behavior

What behavior did you actually see?

The mat-form-fields render incorrectly on stackblitz:

Also render incorrectly when app is hosted in SharePoint Online on a Web Part Page using a Content Editor Web Part:

Another observation, textarea fields seem to render just fine in mat-form-field elements.

I followed this article to deploy angular apps to SharePoint Online:

https://www.c-sharpcorner.com/article/sharepoint-with-angular/

I'm fairly new to Angular and feel that a dependency was missed or misconfigured during deployment? Having said that, I merely copied & pasted the code of my simple example app to stackblitz & it doesn't render properly there either.

In SharePoint, sometimes I get a 404 error, but not always:

Environment

• Angular: 10.0.14
• CDK/Material: 10.2.7
• Browser(s): Chrome 88.0.4324.182 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Angular CLI: 10.0.8
Node: 13.12.0
OS: win32 x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1000.8
@angular-devkit/build-angular 0.1000.8
@angular-devkit/build-optimizer 0.1000.8
@angular-devkit/build-webpack 0.1000.8
@angular-devkit/core 10.0.8
@angular-devkit/schematics 10.0.8
@angular/cdk 10.2.7
@angular/cli 10.0.8
@angular/material 10.2.7
@ngtools/webpack 10.0.8
@schematics/angular 10.0.8
@schematics/update 0.1000.8
rxjs 6.5.5
typescript 3.9.9
webpack 4.43.0

[crisbeto]

As far as I can tell, it's because you haven't included a theme. There's more information in the theming guide: https://material.angular.io/guide/theming

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}