覆盖 Angular Material 2 MdDatepicker 从触发器的顶部或左侧偏移

Question

我在侧边导航中使用 Angular Material 2 MdDatepicker。在移动设备上，视口不够宽，无法在打开时混淆日期选择器。我在此处添加了一张图片，以向您展示打开的样子。

目前，此日期选择器的左侧偏移量为距左侧 197.5 像素。这种风格是内联的，不容易被覆盖。我想找到一种方法来用 CSS 覆盖它（我无法弄清楚）或者在我的 component.ts 文件中导入他 MdDatepicker 并覆盖它的行为或你能想到的任何其他东西。我需要那个号码是44px，而不是197.5px。

以下是我从开发人员工具中提取的内联代码。日期选择器在 cdk-overlay 内打开，并在该 div 内偏移。

<div id="cdk-overlay-1" class="cdk-overlay-pane" 
dir="ltr" style="pointer-events: auto; top: 416px; left: 197.5px;">

我是材料新手，我希望即使没有 Angular Material 的支持，我们也能找到一个 hack 来做这件事。我只需要将此偏移量应用于某些日期选择器，而不是全部。但是，我会用一个简单的解决方案将这个答案标记为接受，以调整和自定义左偏移或偏移顶部位置。我想如果我可以做一个，我可以很容易地做另一个，我查看了 node_module 中的MdDateicker 代码，我不清楚如何覆盖这个组件。

Answer 1

我在 mat-datepicker 也有 cdk-overlay-pane 时遇到了同样的问题，我在另一篇文章中找到了编辑样式的解决方案。 Changing style of overlay container

::ng-deep .cdk-overlay-container {
  top: 416px;
  left: 197.5px;
}