英文:
Module Warning Angular Material themes should be created from a map containing the keys color, typography, density
问题
我正在从Angular 14升级到15,同时也升级了Material UI。
看到这个警告,尚未找到任何解决方案。
Angular Material主题应该从包含键“color”、“typography”和“density”的映射中创建。颜色值应该是包含“primary”、“accent”和“warn”的调色板值的映射。请参阅https://material.angular.io/guide/theming了解更多信息。
有人可以指导我吗?
我的package.json:
{
"name": "memphis",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"testci": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",
"testci2": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@amcharts/amcharts4": "^4.10.33",
"@angular/animations": "^15.1.2",
"@angular/cdk": "^15.1.2",
"@angular/common": "^15.1.2",
"@angular/compiler": "^15.1.2",
"@angular/core": "^15.1.2",
"@angular/forms": "^15.1.2",
"@angular/material": "^15.1.2",
"@angular/material-moment-adapter": "^15.1.2",
"@angular/platform-browser": "^15.1.2",
"@angular/platform-browser-dynamic": "^15.1.2",
"@angular/router": "^15.1.2",
"@mat-datetimepicker/core": "^11.0.1",
"@mat-datetimepicker/moment": "^11.0.1",
"bootstrap": "^5.2.3",
"bufferutil": "^4.0.7",
"core-js": "^3.27.2",
"d3": "^7.8.2",
"file-saver": "2.0.5",
"jquery": "^3.6.3",
"karma-tfs-reporter": "^1.0.2",
"lodash-es": "^4.17.21",
"moment": "^2.29.4",
"ngx-bootstrap": "10.2.0",
"ngx-loading": "^15.0.0",
"ngx-mat-select-search": "^7.0.0",
"popper.js": "1.16.1",
"rxjs": "^7.8.0",
"simplebar": "^6.2.0",
"timelines-chart": "^2.11.8",
"zone.js": "~0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.1.3",
"@angular-eslint/builder": "15.2.0",
"@angular-eslint/eslint-plugin": "15.2.0",
"@angular-eslint/eslint-plugin-template": "15.2.0",
"@angular-eslint/schematics": "15.2.0",
"@angular-eslint/template-parser": "15.2.0",
"@angular/cli": "^15.1.3",
"@angular/compiler-cli": "^15.1.2",
"@angular/language-service": "^15.1.2",
"@types/d3": "^7.4.0",
"@types/jasmine": "~4.3.1",
"@types/jasminewd2": "~2.0.10",
"@types/node": "^18.11.18",
"@typescript-eslint/eslint-plugin": "^5.48.2",
"@typescript-eslint/parser": "^5.48.2",
"angular2-template-loader": "^0.6.2",
"electron": "^22.0.3",
"eslint": "^8.32.0",
"jasmine-core": "~4.5.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"karma-junit-reporter": "^2.0.1",
"karma-sonarqube-unit-reporter": "0.0.23",
"protractor": "~7.0.0",
"puppeteer": "^19.5.2",
"sass": "^1.58.0",
"ts-node": "~10.9.1",
"tslib": "^2.4.1",
"typescript": "4.8.4",
"typescript-tslint-plugin": "^0.5.5",
"wallaby-webpack": "^3.9.16"
}
}
英文:
I am updating from Angular 14 to 15 along with Material UI
Seeing this warning, haven't found any solution to it yet.
Angular Material themes should be created from a map containing the keys "color", "typography",
and "density". The color value should be a map containing the palette values for "primary", "accent", and "warn". See https://material.angular.io/guide/theming for more information.
Can someone point me in the right direction?
My package.json
{
"name": "memphis",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"testci": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",
"testci2": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",
"lint": "ng lint",
"e2e": "ng e2e" },
"private": true,
"dependencies": {
"@amcharts/amcharts4": "^4.10.33",
"@angular/animations": "^15.1.2",
"@angular/cdk": "^15.1.2",
"@angular/common": "^15.1.2",
"@angular/compiler": "^15.1.2",
"@angular/core": "^15.1.2",
"@angular/forms": "^15.1.2",
"@angular/material": "^15.1.2",
"@angular/material-moment-adapter": "^15.1.2",
"@angular/platform-browser": "^15.1.2",
"@angular/platform-browser-dynamic": "^15.1.2",
"@angular/router": "^15.1.2",
"@mat-datetimepicker/core": "^11.0.1",
"@mat-datetimepicker/moment": "^11.0.1",
"bootstrap": "^5.2.3",
"bufferutil": "^4.0.7",
"core-js": "^3.27.2",
"d3": "^7.8.2",
"file-saver": "2.0.5",
"jquery": "^3.6.3",
"karma-tfs-reporter": "^1.0.2",
"lodash-es": "^4.17.21",
"moment": "^2.29.4",
"ngx-bootstrap": "10.2.0",
"ngx-loading": "^15.0.0",
"ngx-mat-select-search": "^7.0.0",
"popper.js": "1.16.1",
"rxjs": "^7.8.0",
"simplebar": "^6.2.0",
"timelines-chart": "^2.11.8",
"zone.js": "~0.12.0" },
"devDependencies": {
"@angular-devkit/build-angular": "^15.1.3",
"@angular-eslint/builder": "15.2.0",
"@angular-eslint/eslint-plugin": "15.2.0",
"@angular-eslint/eslint-plugin-template": "15.2.0",
"@angular-eslint/schematics": "15.2.0",
"@angular-eslint/template-parser": "15.2.0",
"@angular/cli": "^15.1.3",
"@angular/compiler-cli": "^15.1.2",
"@angular/language-service": "^15.1.2",
"@types/d3": "^7.4.0",
"@types/jasmine": "~4.3.1",
"@types/jasminewd2": "~2.0.10",
"@types/node": "^18.11.18",
"@typescript-eslint/eslint-plugin": "^5.48.2",
"@typescript-eslint/parser": "^5.48.2",
"angular2-template-loader": "^0.6.2",
"electron": "^22.0.3",
"eslint": "^8.32.0",
"jasmine-core": "~4.5.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"karma-junit-reporter": "^2.0.1",
"karma-sonarqube-unit-reporter": "0.0.23",
"protractor": "~7.0.0",
"puppeteer": "^19.5.2",
"sass": "^1.58.0",
"ts-node": "~10.9.1",
"tslib": "^2.4.1",
"typescript": "4.8.4",
"typescript-tslint-plugin": "^0.5.5",
"wallaby-webpack": "^3.9.16"
}
}
> margin.limits.component.scss?ngResource - Warning: Module Warning (from
> ./node_modules/sass-loader/dist/cjs.js): Angular Material themes
> should be created from a map containing the keys "color",
> "typography", and "density". The color value should be a map
> containing the palette values for "primary", "accent", and "warn". See
> https://material.angular.io/guide/theming for more
> information. node_modules@angular\material\core\theming_theming.scss
> 185:5
> define-light-theme()node_modules@angular\material\core\theming_theming-deprecated.scss
> 26:11 light-theme()
> src\app\hotel-search\hotel-search.component.scss
> 70:16 @import
> src\app\admin\margin-limits\margin-limits.component.scss
> 1:9 root stylesheet
$mat-buttons: (
100: #f5f5f5,
500: #0000ff,
700: $btn-secondary-bg,
contrast: (
100: rgba(black, 0.87),
500: #00ff00,
700: $btn-secondary-color,
)
);
$primary: mat-palette($mat-buttons, 500);
$accent: mat-palette($mat-buttons, 700);
$hotel-search: mat-light-theme($primary, $accent);
答案1
得分: 18
将您的 $hotel-search: mat-light-theme($primary, $accent); 更改为以下内容:
@use '@angular/material' as mat; //declare above imports
$hotel-search: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
),
typography: mat.define-typography-config(),
density: 0,
));
更多细节可以在Angular 15中应用主题中找到。
英文:
Change your $hotel-search: mat-light-theme($primary, $accent); to something like below:
@use '@angular/material' as mat; //declare above imports
$hotel-search: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
),
typography: mat.define-typography-config(),
density: 0,
));
Details can be found here
Applying theme in Angular 15
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论