Angular material to customize daterangepicker's appearance

I am having a date-range-picker component:

    <mat-form-field>
      <mat-label>Enter a date range</mat-label>
      <mat-date-range-input [rangePicker]="picker">
        <input matStartDate matInput placeholder="Start date">
        <input matEndDate matInput placeholder="End date">
      </mat-date-range-input>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-date-range-picker #picker></mat-date-range-picker>
    </mat-form-field>

which behaves weirdly. If it stands alone, then it looks fine. If combined with others then its appearance changes:

1. its size becomes irregular that instead showing week days as "M T W T F S S", it displays "MondayTuesdayWednesdayThursdayFriday", and the whole calendar is distorted;
2. when click open the calendar, instead of overlaying on top of components below it, the calendar appears at the bottom of the page, totally detached from the component.

Is there anything I can do?

This can be solved by adding this to style.css:

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