Css Can'；t删除日期选择器标签应位于的空间

我正在尝试移除标签应该位于的额外空间（绿色部分）

这似乎是日期选择器的CSS，现在问题来了：

我在.css文件中添加了这个，但它似乎没有任何作用

.mat-form-field-appearance-fill .mat-form-field-flex {
padding-top: 0.0em !important;
padding-right: 0.0em !important;
padding-bottom: 0px !important;
padding-left: 0.0em !important; 
}

是的，CSS文件链接到html文件，当我尝试修改其他内容时，它可以工作

你知道为什么吗

编辑：我正在使用角度材质日期选择器

这是HTML

<mat-form-field appearance="fill">
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="from" placeholder="From">
    <input matEndDate formControlName="to" placeholder="To">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
  <mat-error *ngIf="range.controls.from.hasError('matStartDateInvalid')">Invalid starting date!</mat-error>
  <mat-error *ngIf="range.controls.to.hasError('matEndDateInvalid')">Invalid ending date!</mat-error>
</mat-form-field>

开始日期无效！
结束日期无效！

您的CSS规则是正确的。您很可能遇到视图封装问题

如果在组件中使用由

样式URL

数组定义的CSS文件，则规则不会穿透到角度组件。你可以用两种方法来解决这个问题

将规则移动到顶级css/scss文件

使用

：：ng deep

伪类应用组件中的规则。（我建议将其嵌套在

：host

伪类中以限制您的范围）

---

下面是一个StackBlitz，展示了这两种方法的工作原理：

您使用的日期选择器是什么？HTML在哪里？@berkobienb Angular Material Date picker，我编辑了这个问题，添加了HTMLTry，删除了.mat表单字段外观填充类，只使用：mat form field flex。类似这样：

.mat表单字段flex{padding top:0.0em！重要；padding right:0.0em！重要；padding bottom:0px！重要；padding left:0.0em！重要；}

@berkobienb不起作用，已经尝试过了。真奇怪，我不能修改它。：ng deep修复了它，谢谢！

:host ::ng-deep .your-class {
     // rules
}