Angular 13 Material Datepicker does not apply styles properly

Question

I've been trying to learn how to use angular 13 datepicker and I can't understand what is not working properly.

Here is my main module.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
  AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    ...
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [
    MatDatepickerModule,
    MatNativeDateModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is the code that I used, based on this tutorial :

<input [matDatepicker]="myDatepicker">
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

And this is how it looks like: 1

And I don't really understand what I am missing and why it doesn't look like it is supposed to.

Thanks!

Answer 1

You need to import the theme you want to use within your material components.

For example you can use

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

for your global css.

Had the the problem once, too. --> Angular 5 Material 2: Datepickerstyle

More infos about the Prebuild themes --> https://v6.material.angular.io/guide/theming#using-a-pre-built-theme