我使用了一个新项目
ng new app
ng add @angular/material
我在styles.css包含了以下行:
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
我想将暗淡琥珀主题的主要颜色应用于<p>元素。
我如何提取预构建方案的主要颜色并将其应用到我自己的Angular 6组件?
I set up a new project using
ng new app
ng add @angular/material
I included the following line in styles.css:
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
I want to apply the primary color of the deeppurple-amber theme to a <p> element.
How can I extract the primary color of a prebuilt scheme and apply it to my own component in Angular 6??
最满意答案
而不是导入预建主题,而是包含预建主题的内容 。
@import '~@angular/material/theming'; // Include non-theme styles for core. @include mat-core(); // Define a theme. $primary: mat-palette($mat-deep-purple); $accent: mat-palette($mat-amber, A200, A100, A400); $theme: mat-light-theme($primary, $accent); // Include all theme styles for the components. @include angular-material-theme($theme);然后,您可以访问调色板和颜色,并为您自己的组件创建主题 。
Instead of importing the pre-built theme, include the content of the pre-built theme instead.
@import '~@angular/material/theming'; // Include non-theme styles for core. @include mat-core(); // Define a theme. $primary: mat-palette($mat-deep-purple); $accent: mat-palette($mat-amber, A200, A100, A400); $theme: mat-light-theme($primary, $accent); // Include all theme styles for the components. @include angular-material-theme($theme);You can then access the palettes and colors and theme your own components.
更多推荐
发布评论