我刚刚升级了Angular 应用程序从16到17.应用程序有如下定制主题.

CustTheme.scss

@use '@angular/material' as mat;

@include mat.core();

$pp: mat.define-palette(mat.$indigo-palette);
$primary: mat.get-color-from-palette($pp);
$ap: mat.define-palette(mat.$pink-palette);
$accent: mat.get-color-from-palette($ap);
$wp: mat.define-palette(mat.$red-palette);
$warn: mat.get-color-from-palette($wp);

$theme: mat.define-light-theme((
 color: (
   primary: $pp,
   accent: $ap,
   warn: $wp,
 ),
 typography: mat.define-typography-config(),
));

@include mat.all-component-themes($theme);

这似乎工作得很好,除了当我try 在Style.scss中获取原色时,它不工作

style.scss

import '/custTheme';
background-color: mat-color($primary, darker);

它似乎不认识垫 colored颜色 功能.我在浏览器里看到的是

color: mat-color(#616161, darker);

有人能解释一下这是怎么回事吗?

谢谢

推荐答案

我们需要导入主题和Angular material 根导入,然后我们可以使用mat.get-color-from-palette和输入所需的调色板和阴影,它将工作!

@use '@angular/material' as mat;
@import './theme.scss';

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  background-color: mat.get-color-from-palette($pp, 'darker') !important;
  // background-color: $primary !important;
}

html,
body {
  height: 100%;
}

Stackblitz Demo

Angular相关问答推荐

Angular - Bootstrap 5 Carbon不工作

如何取消针叶林输入的自动填充?

iOS Mobile Safari - HTML5视频覆盖一切

为什么这个拦截器只在发送事件上触发,而不是在实际响应上触发?

有没有一种方法用timeout()操作符创建计数器,用于超时一个观察对象?

我如何更新此Ionic应用程序以解决路由问题?

未在ng bootstrap 模式中设置表单输入

有没有其他代码可以用函数的方式写成Angular ?

角路径S异步旋转变压器仍可观察到

在Cypress中,对xlsx文件的读取并不总是正确的

Angular 信号 - 使用 mutate() 与使用 forEach() react 性

无法创建新的 Ionic 项目

RxJS如何按顺序进行POST请求,只有在前一个完成后才会触发新的请求?

重新打开模态时 ng-select 中的重复值 - Angular

手动关闭 SSE 连接:Angular

如何在本地处理错误并跳过 Angular HTTP 拦截器?

如何 use/import http模块?

为什么Angular 12 'ng serve' 构建应用程序的速度很慢?

如何防止角material垫菜单关闭?

Angular2:CoreModule 与 SharedModule