我正在构建一个应用程序,但我想保持一致的颜色方案,可以通过设置更改,所以我使用材料(2)与角度(2 +),但我不知道如何获得不直接的元素的配色方案提供了为它们着色的能力,color="primary"因此我试图弄清楚如何获得我的Material 2主题使用的颜色/颜色方案.我希望它在主题发生变化时进行更改,例如我的导航栏将适应主题更改,因为它设置为
<mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">
Run Code Online (Sandbox Code Playgroud)
但是材质2中的网格元素并没有采用相同的参数,所以我试图用足够接近的颜色来设置它的样式,或者根本不匹配它(并且它不会适应主题变化),如下所示:
我希望它与主题垫匹配颜色,这是在这里(并在导航栏设置中选择的选项上更改)
@import '~@angular/material/theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-red);
$candy-app-accent: mat-palette($mat-deep-orange, A200, A100, A400);
$candy-app-warn: mat-palette($mat-red);
$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
.default {
@include angular-material-theme($candy-app-theme);
}
.light {
$light-primary: mat-palette($mat-blue, 200,300, 900);
$light-accent: mat-palette($mat-light-blue, 600, 100, 800);
$light-warn: mat-palette($mat-red, 600);
$light-theme: mat-dark-theme($light-primary, …Run Code Online (Sandbox Code Playgroud) 我正在使用Angular2,我想将高度设置<app-root>为100%<body>.
目前我有:
<body>
<app-root></app-root>
</body>
Run Code Online (Sandbox Code Playgroud)
在CSS文件中我设置:
app-root {
height: 100%;
}
Run Code Online (Sandbox Code Playgroud)
但似乎没有任何改变.
你有什么主意吗?
在新的角度项目中,如果我添加具有自定义主题的角度材质,我会收到以下错误:
./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "@include mat": expected 1 selector or at-rule, was ".core();"
on line 2 of src/styles.scss
>> @include mat.core();
Run Code Online (Sandbox Code Playgroud)
我在用着
Angular CLI: 12.0.5
Node: 14.17.1
Package Manager: npm 7.18.1
OS: win32 x64
Angular: 12.0.5
Run Code Online (Sandbox Code Playgroud)
知道什么可能导致此错误吗?如果我尝试 ctrl+click @use'~@angular/material' as mat;它不会带我去任何地方。
重现方法:
ng new projectcd projectng add @angular/material<- 选择 sass 和自定义主题ng serve我试图逃跑npm uninstall node-sass,但似乎没有帮助。当我运行时,ng serve …