Ionic 6+Angular：如何移除Datetime组件的额外头部？

你已经正确绑定了[showDefaultTitle]="false"，针对那个带有datetime-selected-date类的额外头部，以下是几个可行的解决方法：

方法1：提升样式优先级 #

在组件的SCSS文件中添加带有!important的穿透样式，确保覆盖组件内部默认样式：

::ng-deep .datetime-selected-date {
  display: none !important;
}

方法2：禁用组件样式封装 #

在组件装饰器中关闭样式封装，让组件内的样式可以直接作用于子组件元素，同时通过父选择器避免全局污染：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent {
  // 组件逻辑代码
}

然后在组件SCSS中添加：

app-your-component .datetime-selected-date {
  display: none;
}

方法3：全局样式覆盖 #

直接在项目根目录的styles.scss文件中添加样式，这种方式最直接，但如果需要仅针对特定组件生效，记得加上父元素选择器：

// 全局隐藏所有Datetime的额外头部
.datetime-selected-date {
  display: none;
}

// 仅针对特定组件隐藏
app-target-component .datetime-selected-date {
  display: none;
}

另外可以检查是否给Datetime设置了value属性——当存在初始选中值时，这个额外头部会默认显示，上述方法都能有效将其隐藏。

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