css - 使用 Angular 4 自定义主题

Question

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

我可以让预构建的主题正常工作，但是当我尝试使用自定义主题时，什么也没有发生。一定有一些步骤我没有做，但从图看来，我只需要添加一个包含自定义主题的 scss 文件到我的 src 文件夹，并将文件名添加到 angular-cli.json 的样式部分

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

@import '~@angular/material/theming'

工作还是应该工作

@import '~@angular/material/_theming'

甚至

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

？

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

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

Answer 1

创建一个 .scss 文件，您可以命名任何名称。在该文件中，您需要添加自定义主题...请注意，对于 Angular io (或 Angular 4)来说，首先从 @Angular/material 的模块导入“主题”非常重要...让我粘贴一个片段/该文件将包含的内容的示例。 我们开始吧...

@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设置样式，或者如果您没有任何CSS文件，则创建一个文件，并且它必须是.scss，因为这将编译粗鲁地)像这样

我们又来了...

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

最后...在 .angular-cli.json 中的“styles”键下，还将自定义主题文件的路径添加为该键的值之一。那么你就可以了...但是请记住...当使用 @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

]

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