Mat-datepicker呈现在内容下方。

Question

我在Angular中的素材设计datepicker呈现在内容下方。

我有一个组件是模块的一部分，在app-root里面渲染。在这个组件里面我有mat-stepper，在一个步骤里面我有mat-datepicker。

这就是我的组件apporx.的样子。

<mat-horizontal-stepper #stepper>
     <mat-step>
        <div data-component="app-root">
          <section>
            ...
              <mat-form-ifield>
                    <mat-label>Choose a date</mat-label>
                    <input matInput [matDatepicker]="picker">
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                  </mat-form-ifield>
            ...

当我检查页面的时候，我看到了以下内容

<head>
 <body>
  <app-root>
   <my component here>
  <couple of scripts>
  <div class="cdk-overlay-container>...</div> (this is where the datepicker is rendered)

我想我可以通过编辑cdk-overlay-container类的css来解决这个问题，但这似乎不是正确的方法。这里的问题是什么？