Angular 4 个自定义主题

Question

我在使用 Angular4、@angular/cli 和 Material 中的自定义主题时遇到问题。我多次搜索 tuts 并阅读和重新阅读文档，但没有任何效果。恐怕这似乎是一些人问过的问题，但他们问题的答案似乎对我不起作用并且似乎对应于 angular 和 angular-cli 的早期版本.

我可以使用预构建的主题，但是当我尝试使用自定义主题时没有任何反应。一定有一些我没有做的步骤，但从 tuts 看来我只需要将包含我的自定义主题的 scss 文件添加到我的 src 文件夹并将文件名添加到 angular-[ 的样式部分=31=]

我尝试了各种@import 语法，但似乎无法导入？有

@import '~@angular/material/theming'

工作还是应该

@import '~@angular/material/_theming'

甚至

@import '~@angular/material/_theming.scss'

?

我的 styles.css 文件中需要单独的 @import 吗？

我找不到任何可用的教程，而且文档似乎遗漏了一些内容。自定义主题是否像许多人声称的那样被破坏了？

Answer 1

这对我有用：

@import "../node_modules/@angular/material/_theming.scss";

我也按照这里的说明操作：

Answer 2

创建一个可以任意命名的 .scss 文件。在该文件中，您需要添加自定义主题...请注意 angular io（或 angular 4）首先从 @angular/material 导入 "theming" 很重要的模块...让我粘贴一个 snippet/example 文件将包含的内容。我们开始...

@import '~@angular/material/theming';
@include mat-core();

$app-primary: mat-palette($mat-green, A400);
$app-accent:  mat-palette($mat-light-blue, A400);
$app-warn: mat-palette($mat-red);
$app-grey: mat-palette($mat-grey, A50);


$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

@include angular-material-theme($app-theme);

保存该文件...然后将其导入到您的 css 主文件中（css 文件为您的 index.html 设置样式，如果您没有和它必须是 .scss 因为这将编译为 sass) 就像这样

我们又来了...

@import "path/to/your/theme_file.scss";

最后...在键 "styles" 下的 .angular-cli.json 中，还将自定义主题文件的路径添加为该键的值之一。然后你就可以开始了......但是记住......当使用@angular/material模块时......你必须将模块中的每个组件导入到你的app.module.ts中以便在你的项目说

import { MaterialModule, MdDialogModule, MdInputModule, MdRadioModule, MdDatepickerModule, MdMenuModule, MdToolbarModule, MdIconModule, MdProgressSpinnerModule } from '@angular/material';

然后像这样输入导入密钥

imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
MaterialModule,
MdInputModule,
MdDialogModule,
MdRadioModule,
MdDatepickerModule,
MdMenuModule,
MdToolbarModule,
MdIconModule,
MdProgressSpinnerModule

]

...希望这对您的问题有所帮助。

Angular 4 个自定义主题

Custom themes with Angular 4

css

sass

angular-material

custom-theme

angular