如何通过SCSS使Angular的ng2-date-picker宽度匹配父元素？

当然可以通过SCSS结合::ng-deep实现这个需求！我来帮你调整样式代码，让ng2-date-picker的内部元素完全匹配父容器.date-picker的宽度，完美适配Bootstrap的响应式布局：

核心思路 #

Angular组件默认有视图封装机制，所以我们需要用::ng-deep穿透封装，直接对ng2-date-picker的内部嵌套元素设置样式。核心是让组件内部的容器和输入框宽度继承父元素的100%，同时通过box-sizing: border-box确保padding不会导致宽度溢出。

修改后的SCSS代码 #

.date-picker {
  font-family: $af-default-font;
  font-size: 18px;
  height: 35px;
  padding-left: 5px;
  border-radius: 8px;
  border: solid 1px $af-brownish-grey;
  background-color: transparent;
  color: $af-brownish-grey;
  // 确保父容器盒模型正确，padding不会增加总宽度
  box-sizing: border-box;

  ::ng-deep {
    // 选中ng2-date-picker内部的输入容器，强制宽度匹配父元素
    .dp-input-container {
      width: 100%;
      box-sizing: border-box;
      border: none; // 移除组件自带边框，和父容器边框统一
    }

    input {
      width: 100%; // 让输入框撑满容器
      box-sizing: border-box;
      &:last-child {
        border: none;
        font-family: $af-default-font;
        font-size: 18px;
        height: 33px;
        padding-left: 5px;
        background-image: url("/assets/icons/calendar (3).png");
        background-repeat: no-repeat;
        background-position: right 0px center;
        background-size: 20px;
      }
    }

    // 可选：如果弹出的日历面板也需要适配父元素宽度，添加以下样式
    .dp-calendar-container {
      width: 100%;
      max-width: 100%;
    }
  }
}

代码说明 #

1. 父容器盒模型：给.date-picker添加box-sizing: border-box，确保设置的padding不会额外增加元素总宽度，和Bootstrap的盒模型保持一致。
2. 穿透组件容器：通过::ng-deep选中.dp-input-container（ng2-date-picker内部的核心容器），设置width: 100%让它完全继承父元素的宽度。
3. 输入框自适应：给内部input设置width: 100%，确保输入框撑满容器，同时用box-sizing: border-box避免padding导致宽度溢出。
4. 可选日历面板适配：如果需要弹出的日历面板也跟随父元素宽度变化，可以添加.dp-calendar-container的样式设置。

效果验证 #

现在你的ng2-date-picker会完全跟随.date-picker父容器的宽度变化，而父容器又受Bootstrap 4栅格系统控制，完美实现响应式的动态宽度效果。

内容的提问来源于stack exchange，提问作者onmyway