要更改Angular Material主题并保留一些自定义CSS,可以按照以下步骤进行操作:
npm install @angular/material @angular/cdk
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [MatButtonModule, MatIconModule],
exports: [MatButtonModule, MatIconModule]
})
export class MaterialModule { }
"styles": [
"src/styles.css",
"src/custom-theme.scss"
],
@import '~@angular/material/theming';
@include mat-core();
$primary: mat-palette($mat-blue, 500);
$accent: mat-palette($mat-pink, 500);
$warn: mat-palette($mat-red, 500);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
// 添加自定义CSS样式
.custom-css-class {
background-color: red;
color: white;
}
@import 'custom-theme';
.custom-component {
@extend .custom-css-class;
}
现在,你可以在Angular组件中使用MatButtonModule和MatIconModule等Angular Material组件,并且它们将采用自定义的主题样式和自定义CSS样式。