Angular Material Style Class not working

Question

I\'m using Angular Material to add Date Picker to my app. For some reason the angular material is not applying the original angular materia

Answer 1

Try adding the style files to your angular.json, for example you can use the deeppurple amber prebuilt theme:

"styles": [
    "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
]

More information on this page: https://material.angular.io/guide/getting-started#step-4-include-a-theme

Answer 2

have you tried to include the MatInputModule and MatFormFieldModule?

I think you need still to include the MatInputModule since you are working on a input, so that the Angular Material will initialize the style of the input.

// add this

import {MatNativeDateModule, MatDatepickerModule,MatFormFieldModule,MatInputModule } from "@angular/material";

also it is better if you also include MatFormFieldModule since you are working on a Form Field.

and MatInputModule is designed to work inside MatFormFieldModule. // check this link https://material.angular.io/components/form-field/overview

Sample Code.

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

hope this helps ...

Answer 3

This is based on Angular 11. Like everyone said, I did make sure that the style was added to angular.json (which was already there) and the necessary imports in the app.module.ts. Despite these, I was still getting messed up styles. Very interestingly, it did pick up the theme color, but not the control styles. I ended up adding another import in each of the component files where, mat* components were used and it worked fine.

import { MatButtonModule } from "@angular/material/button";

Remember that when you add that import, your IDE (in my case VS Code and Visual Studio 2019) will tell you (by greying it out) that it's not needed and can be removed.

Answer 4

According to Official Documentation of Angular Material:

Including a theme is required to apply all of the core and theme styles to your application.

To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application.

You can simply add the following to your style.css in order to get it work:

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

Or you can directly include using <link> tag in your head tag.

---

P.S: To create your own custom built theme visit https://material.angular.io/guide/theming

Answer 5

It worked after wasting 2 days.

If you don't find any solution just add angular material again. It won't affect your code but It will add the CSS. Don't forget to re-start the angular server.

ng add @angular/material

Answer 6

You need to wrap the input element with a <mat-form-field> and then the Material style is applied.

<input matInput .... /> on its own is not sufficient.

You need:

<mat-form-field>
    <input matInput .... />
</mat-form-field>