Предупреждение модуля. Темы Angular Material должны создаваться из карты, содержащей цвет ключей, типографику, плотность

Я обновляюсь с Angular 14 до 15 вместе с Material UI.

Увидев это предупреждение, пока не нашел решения.

Темы Angular Material должны создаваться из карты, содержащей ключи «цвет», «типографика», и «плотность». Значение цвета должно быть картой, содержащей значения палитры для «основного», «акцента» и «предупреждения». Смотрите https://material.angular.io/guide/theming для получения дополнительной информации.

Может ли кто-нибудь указать мне в правильном направлении?

Мой пакет.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 – Предупреждение: Предупреждение модуля (от ./node_modules/sass-loader/dist/cjs.js): темы Angular Material должен быть создан из карты, содержащей ключи «цвет», "типографика" и "плотность". Значение цвета должно быть картой содержащий значения палитры для «основного», «акцента» и «предупреждения». Видеть https://material.angular.io/guide/theming подробнее информация. node_modules@angular\material\core\theming_theming.scss 185:5 определить светлую тему()node_modules@angular\material\core\theming_theming-deprecated.scss 26:11  светлая тема() src\app\hotel-search\hotel-search.component.scss 70:16                      @import src\app\admin\margin-limits\margin-limits.component.scss 1:9                корневая таблица стилей

$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);
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
417
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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

Другие вопросы по теме