Mat-datepicker-toggle在模式后面显示

Question

Helloo， 我在使用angular 4和bootstrap 4时遇到问题，当我单击open显示日历时。  它显示在我的模态背后。 我想在其类上更改z-index，但由于该类是自动生成的，所以我没有访问该类的权限。 我该如何解决问题？ 这是我的代码。 预先感谢。

Answer 1

问题在于引导程序模式集z-index:1050

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

创建z-index: 1000时，物料日期选择器将设置ckd-overlay-pane

.cdk-overlay-pane {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    max-width: 100%;
    max-height: 100%;
}

将其添加到组件样式表应该可以解决问题……但这将适用于整个项目中的所有日期选择器。

• 您将需要包含一个自定义类标识符以使其具体化 如果您只想更改模式选择器，请选择该模式。

  ::ng-deep .cdk-overlay-container mat-datepicker-content{
    z-index:2000;
  }
  

---

请参考该SO问题的答案，以了解为什么可以使用::ng-deep直到另行通知。

What to use in place of ::ng-deep