CODEWITHSUNDEEP
angular-materialangular-material2angular-material-5
matchifang
matchifang

Reputation: 5450

How to import Angular Material Css

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:

enter image description here

But it shows:

enter image description here

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.

enter image description here

Upvotes: 12

Views: 37369

Answers (1)

mahval
mahval

Reputation: 2213

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],
...
})

Upvotes: 21

Related Questions