提问人：stax 提问时间：11/16/2023 最后编辑：stax 更新时间：11/16/2023 访问量：60
Angular 16 - 自定义样式调色板对材质组件没有影响
Angular 16 - custom style palette takes no effect on material components
问：
我目前正在为我的 angular 应用程序尝试自定义颜色主题。但不幸的是，我找不到任何关于如何将它们正确集成到我的应用程序中的结论性文档。 不幸的是，这里的 Angular Material 文档对我来说也是相当不确定的。我试图尽可能地遵循它，但不知何故，它对我的材料成分没有任何影响......
我定义的原色应该是红色：
但是，例如日期选择器上显示的颜色仍然是紫色的：
我的日期选择器组件 html：
<div class="test">
<input class="input-date"
[matDatepicker]="picker">
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</div>
这就是我的样子：theme.scss
@use '@angular/material' as mat;
@include mat.core();
$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;
$test-palette: (
50: #F5E3E3,
100: #E6BABA,
200: #D58C8C,
300: #C45D5D,
400: #B83B3B,
500: #AB1818,
600: #A41515,
700: #9A1111,
800: #910E0E,
900: #800808,
A100: #FFAFAF,
A200: #FF7C7C,
A400: #FF4949,
A700: #FF3030,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
500: $light-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $dark-primary-text,
A400: $dark-primary-text,
A700: $light-primary-text,
)
);
$custom-primary: mat.define-palette($test-palette);
$custom-accent: mat.define-palette($test-palette);
$custom-app-theme: mat.define-light-theme((
color:(
primary: $custom-primary,
accent: $custom-accent,
)
));
@include mat.all-component-themes($custom-app-theme);
我试图将它注入我的：angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"cli": {
"cache": {
"enabled": false,
"path": ".cache",
"environment": "all"
},
"analytics": false
},
"projects": {
"deployConfig": {
"projectType": "application",
"schematics": { "@schematics/angular:component": { "style": "scss" } },
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/MyAppWeb/static",
"deployUrl": "static/",
"index": {
"input": "src/index.html",
"output": "../index.html"
},
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "favicon.ico",
"input": "src/favicon.ico",
"output": "./../"
},
{
"glob": "my-service-worker.js",
"input": "src/my-service-worker.js",
"output": "./../"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "./../assets"
},
{
"glob": "bootstrap-icons.svg",
"input": "./node_modules/bootstrap-icons/",
"output": "/"
},
{
"glob": "**/*",
"input": "../../MyAppwebconfig",
"output": "./assets/"
},
{
"glob": "**/*",
"input": "node_modules/ngx-extended-pdf-viewer/assets/",
"output": "/assets/"
}
],
"styles": [
"src/theme.scss", <-- here
"src/styles.scss",
"node_modules/primeng/resources/themes/saga-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css",
"./node_modules/leaflet/dist/leaflet.css",
"./node_modules/leaflet-draw/dist/leaflet.draw.css",
"./node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
"node_modules/ngx-spinner/animations/ball-scale-multiple.css",
"node_modules/ngx-spinner/animations/ball-clip-rotate-multiple.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/chart.js/dist/chart.js",
"src/assets/js/notification.js"
],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": true,
"sourceMap": true,
"optimization": true,
"namedChunks": true,
"webWorkerTsConfig": "tsconfig.worker.json"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "4mb",
"maximumError": "8mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "15kb"
}
]
},
"development": {
"optimization": false,
"outputHashing": "all",
"sourceMap": true,
"namedChunks": true,
"extractLicenses": false,
"vendorChunk": true,
"buildOptimizer": false,
"budgets": []
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"disableHostCheck": true,
"options": {
"browserTarget": "MyAppWeb:build"
},
"configurations": {
"production": {
"browserTarget": "MyAppWeb:build:production"
},
"development": {
"browserTarget": "MyAppWeb:build:development"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "MyAppWeb:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"./assets/images/MyApp_Logo_Framed.svg",
"src/assets"
],
"styles": [
"src/theme.scss", <-- here
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "MyAppWeb:serve"
},
"configurations": {
"production": {
"devServerTarget": "MyAppWeb:serve:production"
}
}
}
}
},
"MyAppWeb": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/MyAppWeb",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "bootstrap-icons.svg",
"input": "./node_modules/bootstrap-icons/",
"output": "/"
},
"src/manifest.json",
"src/manifest.json",
"src/manifest.json",
"src/my-service-worker.js"
],
"styles": [
"src/theme.scss", <-- here
"src/styles.scss",
"node_modules/primeng/resources/themes/saga-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css",
"./node_modules/leaflet/dist/leaflet.css",
"./node_modules/leaflet-draw/dist/leaflet.draw.css",
"./node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
"node_modules/ngx-spinner/animations/ball-scale-multiple.css",
"node_modules/ngx-spinner/animations/ball-clip-rotate-multiple.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/chart.js/dist/chart.js",
"src/assets/js/notification.js"
],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": true,
"sourceMap": false,
"optimization": true,
"namedChunks": true,
"serviceWorker": true,
"webWorkerTsConfig": "tsconfig.worker.json",
"ngswConfigPath": "ngsw-config.json"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "6mb",
"maximumError": "8mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "15kb"
}
]
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "MyAppWeb:build"
},
"configurations": {
"production": {
"browserTarget": "MyAppWeb:build:production"
},
"development": {
"browserTarget": "MyAppWeb:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "MyAppWeb:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"./assets/images/MyApp_Logo_Framed.svg",
"src/assets",
"src/manifest.json",
"src/manifest.json",
"src/manifest.json"
],
"styles": [
"src/theme.scss", <-- here
"src/styles.scss"
],
"scripts": [],
"webWorkerTsConfig": "tsconfig.worker.json"
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "MyAppWeb:serve"
},
"configurations": {
"production": {
"devServerTarget": "MyAppWeb:serve:production"
}
}
}
}
}
}
}
我什至不确定到底在哪里注入它，我只是将其添加到所有样式部分。我用 .<-- here
这里有谁能帮我了解如何将其正确集成到 Angular 16 应用程序中？我错过了什么？
感谢您的帮助！
答： 暂无答案
评论