我一直在升级以下版本的Angular版本和材料,但我的风格仍然一团糟,设计也不像最初的,基本上我想使用旧的材料设计,因为Angular版本升级后,寻找材料也会更新这个看起来一团糟的东西,有什么帮助吗?
"dependencies": {
"@angular/animations": "^16.2.6",
"@angular/cdk": "^16.1.3",
"@angular/cli": "^16.2.3",
"@angular/common": "^16.2.6",
"@angular/compiler": "^16.2.6",
"@angular/core": "^16.2.6",
"@angular/elements": "^16.2.6",
"@angular/flex-layout": "^15.0.0-beta.42",
"@angular/forms": "^16.2.6",
"@angular/material": "^16.1.3",
"@angular/material-luxon-adapter": "^16.1.3",
"@angular/platform-browser": "^16.2.6",
"@angular/platform-browser-dynamic": "^16.2.6",
"@angular/router": "^16.2.6",
"@material-ui/core": "^4.12.3",
"@material/tabs": "^2.3.0",
"document-register-element": "^1.14.10",
"ics": "^2.35.0",
"lazysizes": "^5.3.2",
"luxon": "^3.0.0",
"material-table": "^1.69.3",
"ngx-image-cropper": "^7.0.2",
"ngx-link-preview": "^1.1.6",
"quill": "^1.3.7",
"rxjs": "^7.4.0",
"tslib": "^2.3.0",
"zone.js": "^0.13.3"
},
和我的Scss文件
@import '@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
theme-members-primary: mat-palette($mat-indigo);
theme-members-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
theme-members-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
theme-members-theme: mat-light-theme(theme-members-primary, theme-members-accent, theme-members-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme(theme-members-theme);
.mat-calendar{
theme-members-primary2: mat-palette($md-fuscia);
theme-members-theme2: mat-light-theme(theme-members-primary2, theme-members-accent, theme-members-warn);
// Create the theme object (a Sass map containing all of the palettes).
@include angular-material-theme(theme-members-theme2);
}
// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$typography-configuration: mat-typography-config(
$font-family: 'Barlow',
$input: mat-typography-level(16px, 1.94, 500),
);
@include angular-material-typography($typography-configuration);
我已经在angular.json文件中指出了遗留问题
"styles": [
"./node_modules/@angular/material/legacy-prebuilt-themes/legacy-indigo-pink.css",
"src/styles.scss",
"node_modules/quill/dist/quill.snow.css"
],
