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

Question

你好，我在使用 Angular 4 和 Bootstrap 4 时遇到问题。当我单击打开以显示日历时。它显示在我的模态后面。我想更改其类的 z-index，但我无权访问该类，因为它是自动生成的。我该如何解决这个问题？ 这是我的代码。 提前致谢。

Answer 1

问题是 bootstrap-modal 设置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;
  }
  

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

用什么来代替 ::ng-deep