2

我正在尝试删除标签应该在的额外空间（绿色部分）在此处输入图像描述

这似乎是日期选择器的 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 文件。

任何想法为什么？

编辑：我正在使用 Angular Material 日期选择器

这是 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>
4

1 回答 1

1

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

如果您styleUrls在组件中使用由数组定义的 CSS 文件，您的规则将不会穿透到 Angular 组件。您可以通过两种方式解决此问题。

  1. 将您的规则移动到顶级 css/scss 文件。

  2. 使用::ng-deep伪类应用组件中的规则。（我建议将其嵌套在:host伪类中以限制您的范围）。

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

这是一个 StackBlitz，显示这两种方法都有效：https ://stackblitz.com/edit/angular-bvn3gy?file=src%2Fapp%2Fdate-range-picker-comparison-example.css

于 2021-05-25T00:46:59.933 回答