如何导入 Angular Material Css
How to import Angular Material Css
我正在尝试在我的项目中使用 Angular Material 并且标签已导入,但并非所有样式都存在。
在我的 HTML:
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>
它应该显示:
但是它显示:
我将 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
添加到 styles.css,日历显示正常,但文本字段看起来仍然很糟糕。
您需要按照此处的所有内容进行操作。 https://material.angular.io/guide/getting-started
尝试将此行添加到您的 styles.css:@import "~@angular/material/prebuilt-themes/indigo-pink.css";
从这一步开始:https://material.angular.io/guide/getting-started#step-4-include-a-theme
这些是您需要的进口商品:
import { MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule } from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
imports: [BrowserModule, FormsModule, MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, BrowserAnimationsModule],
...
})
我正在尝试在我的项目中使用 Angular Material 并且标签已导入,但并非所有样式都存在。
在我的 HTML:
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>
它应该显示:
但是它显示:
我将 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
添加到 styles.css,日历显示正常,但文本字段看起来仍然很糟糕。
您需要按照此处的所有内容进行操作。 https://material.angular.io/guide/getting-started
尝试将此行添加到您的 styles.css:@import "~@angular/material/prebuilt-themes/indigo-pink.css";
从这一步开始:https://material.angular.io/guide/getting-started#step-4-include-a-theme
这些是您需要的进口商品:
import { MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule } from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
imports: [BrowserModule, FormsModule, MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, BrowserAnimationsModule],
...
})