How to import Angular Material Css

Question

I'm trying to use Angular Material in my project and the tags are imported, but not all of the styling is there.

In my HTML:

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

It should show:

But it shows:

I added @import "~@angular/material/prebuilt-themes/indigo-pink.css"; to styles.css and the calendar is showing fine, but the text field still looks bad.

Answer 1

You need to follow everything here. https://material.angular.io/guide/getting-started

Try adding this line to your styles.css: @import "~@angular/material/prebuilt-themes/indigo-pink.css";

As from this step: https://material.angular.io/guide/getting-started#step-4-include-a-theme

These are the imports you will need:

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

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';


@NgModule({    
imports: [BrowserModule, FormsModule, MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, BrowserAnimationsModule],
...
})