如何修改ng-zorro中nz-range-picker的背景色及调试技巧

针对样式修改无效的问题，需要区分输入框和弹出日历面板两个部分，使用更精准的选择器结合::ng-deep（Angular新版本中也可通过ViewEncapsulation.None替代，临时调试用::ng-deep更便捷）：

1. 修改输入框的背景色 #

使用以下样式覆盖默认样式：

::ng-deep .ant-picker-range {
  background-color: rgba(36, 40, 48, 1);
  color: white;
  border-color: #555; /* 可选：适配深色背景修改边框色 */
}

2. 修改弹出日历面板的背景色 #

弹出面板需要定位到容器和内部日历元素，添加对应样式：

::ng-deep .ant-picker-calendar-container {
  background-color: rgba(36, 40, 48, 1);
}

::ng-deep .ant-picker-calendar {
  background-color: rgba(36, 40, 48, 1);
  color: white;
}

/* 可选：适配深色背景调整日历内文字、日期样式 */
::ng-deep .ant-picker-calendar-header,
::ng-deep .ant-picker-calendar-date-value {
  color: white;
}

额外优化建议 #

如果上述选择器仍无效，可给nz-range-picker添加自定义类名，进一步缩小样式作用范围：

<nz-range-picker class="custom-range-picker" [ngModelOptions]="{ standalone: true }" [(ngModel)]="date"
    [nzPlaceHolder]="[t('fault.date_start'), t('fault.date_end')]" (ngModelChange)="onChange($event)">
</nz-range-picker>

::ng-deep .custom-range-picker .ant-picker-range {
  background-color: rgba(36, 40, 48, 1);
  color: white;
}

针对弹窗类快速消失的元素，有三种实用技巧：

• 监听DOM变化断点：打开Chrome DevTools的Elements面板，右键点击任意父元素（比如body），选择Break on -> Subtree modifications。点击打开弹窗后，当弹窗准备消失时页面会自动暂停，此时可查看弹窗的DOM结构和样式。
• 延时断点：在Console面板执行以下代码，立即点击打开弹窗，3秒后页面会暂停，弹窗不会消失：

setTimeout(() => { debugger; }, 3000);

• 禁用JavaScript：打开DevTools右上角的Settings（齿轮图标），勾选Disable JavaScript。此时页面JS功能被禁用，弹窗不会自动关闭，可从容检查元素（注意此方法会影响页面其他交互，用完记得取消勾选）。

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