要使用Angular Material中的预构建主题,您需要遵循以下步骤:
npm install @angular/material @angular/cdk
app.module.ts
文件中导入所需的Angular Material模块。例如,如果您想使用按钮和卡片组件,您可以导入MatButtonModule
和MatCardModule
:import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
@NgModule({
declarations: [
// ...
],
imports: [
// ...
MatButtonModule,
MatCardModule
],
// ...
})
export class AppModule { }
卡片标题
这是卡片内容。
styles.scss
(或任何其他全局样式文件)中导入所需的主题。例如,要使用深色主题,您可以添加以下代码:@import '~@angular/material/theming';
@include mat-core();
$my-app-theme: mat-dark-theme();
@include angular-material-theme($my-app-theme);
这样,您的应用程序将使用深色主题。
希望这可以帮助您开始使用Angular Material中的预构建主题和组件!