模块警告 Angular Material 主题应从包含键颜色、版式、密度的地图创建

Question

我正在从 Angular 14 更新到 15 以及 Material UI

\n

看到这个警告，目前还没有找到解决办法。

\n

Angular Material 主题应从包含“颜色”、“版式”、\xc2\xa0\n 和“密度”键的地图创建。颜色值应该是包含“primary”、“accent”和“warn”调色板值的映射。有关更多信息，请参阅https://material.angular.io/guide/theming。\xc2\xa0

\n

有人能指出我正确的方向吗？

\n

我的package.json

\n

{\n  "name": "memphis",\n  "version": "0.0.0",\n  "scripts": {\n    "ng": "ng",\n    "start": "ng serve",\n    "build": "ng build",\n    "test": "ng test",\n    "testci": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",\n    "testci2": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",\n    "lint": "ng lint",\n    "e2e": "ng e2e"  },\n  "private": true,\n  "dependencies": {\n    "@amcharts/amcharts4": "^4.10.33",\n    "@angular/animations": "^15.1.2",\n    "@angular/cdk": "^15.1.2",\n    "@angular/common": "^15.1.2",\n    "@angular/compiler": "^15.1.2",\n    "@angular/core": "^15.1.2",\n    "@angular/forms": "^15.1.2",\n    "@angular/material": "^15.1.2",\n    "@angular/material-moment-adapter": "^15.1.2",\n    "@angular/platform-browser": "^15.1.2",\n    "@angular/platform-browser-dynamic": "^15.1.2",\n    "@angular/router": "^15.1.2",\n    "@mat-datetimepicker/core": "^11.0.1",\n    "@mat-datetimepicker/moment": "^11.0.1",\n    "bootstrap": "^5.2.3",\n    "bufferutil": "^4.0.7",\n    "core-js": "^3.27.2",\n    "d3": "^7.8.2",\n    "file-saver": "2.0.5",\n    "jquery": "^3.6.3",\n    "karma-tfs-reporter": "^1.0.2",\n    "lodash-es": "^4.17.21",\n    "moment": "^2.29.4",\n    "ngx-bootstrap": "10.2.0",\n    "ngx-loading": "^15.0.0",\n    "ngx-mat-select-search": "^7.0.0",\n    "popper.js": "1.16.1",\n    "rxjs": "^7.8.0",\n    "simplebar": "^6.2.0",\n    "timelines-chart": "^2.11.8",\n    "zone.js": "~0.12.0"  },\n  "devDependencies": {\n    "@angular-devkit/build-angular": "^15.1.3",\n    "@angular-eslint/builder": "15.2.0",\n    "@angular-eslint/eslint-plugin": "15.2.0",\n    "@angular-eslint/eslint-plugin-template": "15.2.0",\n    "@angular-eslint/schematics": "15.2.0",\n    "@angular-eslint/template-parser": "15.2.0",\n    "@angular/cli": "^15.1.3",\n    "@angular/compiler-cli": "^15.1.2",\n    "@angular/language-service": "^15.1.2",\n    "@types/d3": "^7.4.0",\n    "@types/jasmine": "~4.3.1",\n    "@types/jasminewd2": "~2.0.10",\n    "@types/node": "^18.11.18",\n    "@typescript-eslint/eslint-plugin": "^5.48.2",\n    "@typescript-eslint/parser": "^5.48.2",\n    "angular2-template-loader": "^0.6.2",\n    "electron": "^22.0.3",\n    "eslint": "^8.32.0",\n    "jasmine-core": "~4.5.0",\n    "jasmine-spec-reporter": "~7.0.0",\n    "karma": "~6.4.1",\n    "karma-chrome-launcher": "~3.1.1",\n    "karma-coverage-istanbul-reporter": "~3.0.3",\n    "karma-jasmine": "~5.1.0",\n    "karma-jasmine-html-reporter": "^2.0.0",\n    "karma-junit-reporter": "^2.0.1",\n    "karma-sonarqube-unit-reporter": "0.0.23",\n    "protractor": "~7.0.0",\n    "puppeteer": "^19.5.2",\n    "sass": "^1.58.0",\n    "ts-node": "~10.9.1",\n    "tslib": "^2.4.1",\n    "typescript": "4.8.4",\n    "typescript-tslint-plugin": "^0.5.5",\n    "wallaby-webpack": "^3.9.16" \n}\n }\n

\n

\n

margin.limits.component.scss?ngResource - 警告：模块警告\xc2\xa0（来自\n./node_modules/sass-loader/dist/cjs.js）：Angular Material 主题\n应该从包含键的地图创建“颜色”、\n“版式”、\xc2\xa0 和“密度”。颜色值应该是包含“primary”、“accent”和“warn”调色板值的映射\n。请参阅\n https://material.angular.io/guide/theming了解更多\n信息。\xc2\xa0node_modules@angular\\material\\core\\theming_theming.scss\n185:5\xc2\xa0\xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\ndefine-light-theme()node_modules@ Angular\\material\\core\\theming_theming-deprecated.scss\n26:11\xc2\xa0 light-theme()\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\ xa0\xc2\xa0\nsrc\\app\\hotel-search\\hotel-search.component.scss\n70:16\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2 \xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0 @import\nsrc\\app\\admin\\margin-limits\\margin-limits.component.scss\n1:9\xc2\xa0\xc2\xa0\xc2 \xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0根样式表

\n

\n

$mat-buttons: (\n  100: #f5f5f5,\n  500: #0000ff,\n  700: $btn-secondary-bg,\n  contrast: (\n    100: rgba(black, 0.87),\n    500: #00ff00,\n    700: $btn-secondary-color,\n  )\n);\n$primary: mat-palette($mat-buttons, 500);\n$accent: mat-palette($mat-buttons, 700);\n$hotel-search: mat-light-theme($primary, $accent);\n

\n

Answer 1

更改您的$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 中应用主题