无法删除 space 日期选择器标签应该在的位置
Can't remove the space where the Date-picker Label was supposed to be
我正在尝试删除标签本应位于的额外 space(绿色部分)
这似乎是日期选择器的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>
您的 CSS 规则是正确的。您很可能 运行 考虑了封装问题。
如果您在组件中使用由 styleUrls
数组定义的 CSS 文件,您的规则将不会穿透到 Angular 组件。您可以通过两种方式解决这个问题。
将您的规则移动到顶层 css/scss 文件。
使用 ::ng-deep
伪 class 应用组件中的规则。 (我建议将其嵌套在 :host
伪 class 中以限制您的范围)。
:host ::ng-deep .your-class {
// rules
}
这是一个 StackBlitz 来展示这两种方法的工作原理:https://stackblitz.com/edit/angular-bvn3gy?file=src%2Fapp%2Fdate-range-picker-comparison-example.css
我正在尝试删除标签本应位于的额外 space(绿色部分)
这似乎是日期选择器的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>
您的 CSS 规则是正确的。您很可能 运行 考虑了封装问题。
如果您在组件中使用由 styleUrls
数组定义的 CSS 文件,您的规则将不会穿透到 Angular 组件。您可以通过两种方式解决这个问题。
将您的规则移动到顶层 css/scss 文件。
使用
::ng-deep
伪 class 应用组件中的规则。 (我建议将其嵌套在:host
伪 class 中以限制您的范围)。:host ::ng-deep .your-class { // rules }
这是一个 StackBlitz 来展示这两种方法的工作原理:https://stackblitz.com/edit/angular-bvn3gy?file=src%2Fapp%2Fdate-range-picker-comparison-example.css