[英]How dose Angular Material v15 theming work coming from v14
您好,通过 angular 材料的新更新,他们改变了主题的工作方式。 我遵循了 Angular Material 网站上的教程并添加了一个托盘定义我的主要/强调颜色并应用它:
$lightBlue-palette: (
50: #f1f7f7,
100: #d4f0f8,
200: #a4e3f0,
300: #6dc7da,
400: #08badd,
500: #2687a2,
600: #216e88,
700: #1d536a,
800: #16384d,
900: #0e2335,
contrast: (
50: rgba(black, 0.87),
100: rgba(black, 0.87),
200: rgba(black, 0.87),
300: white,
400: white,
500: white,
600: white,
700: white,
800: white,
900: white,
)
);
$my-primary: mat.define-palette($lightBlue-palette, 400);
$my-accent: mat.define-palette($lightBlue-palette, 900);
$my-theme: mat.define-light-theme((
color: (
primary: $my-primary,
accent: $my-accent,
warn: mat.$red-palette
),
typography: mat.define-typography-config(),
density: 0,
));
@include mat.all-component-themes($my-theme);
就像文档中所说的那样。 但后来我得到这个错误:
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
╷
9 │ --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
│ ^^^^^^^^^^^^^^^^^
╵
node_modules/@angular/material/button/_button-theme-private.scss 9:36 -ripple-color()
node_modules/@angular/material/button/_button-theme-private.scss 43:5 ripple-theme-styles()
node_modules/@angular/material/button/_button-theme.scss 177:7 @content
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5 @content
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3 disable-mdc-fallback-declarations()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3 using-mdc-theme()
node_modules/@angular/material/button/_button-theme.scss 43:3 color()
node_modules/@angular/material/button/_button-theme.scss 216:7 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules/@angular/material/button/_button-theme.scss 210:3 theme()
src/custom-theme.scss 55:1 root stylesheet
我知道更新是全新的,但我不知道他们想从我这里得到什么,而且错误也确实帮助了我。
我试着按照Angular Material中的文档
检查您加载材料组件的位置(它可以放在 app.module.ts 或其他文件中)您没有这些组件的旧版本。 通常标记为从 angular 材料进口,但带有 legacy 前缀。 import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy/card';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.