自定义主题与角4

Question

我对Angular4，@角形/cli和自定义主题在材料上有困难。我已经搜索了很多次，阅读和重读文档，但没有任何效果。恐怕这似乎是一些人提出的问题，但他们的问题的答案似乎不适用于我，似乎符合早期版本的角和角-cli。

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

我尝试过各种@import语法，但它似乎没有导入吗？有吗？

@import '~@angular/material/theming'

工作或应该工作

@import '~@angular/material/_theming'

甚至是

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

在我的styles.css文件中需要单独的@导入吗？

我找不到任何起作用的教程，而且文档似乎遗漏了一些东西。正如许多人所声称的那样，定制主题是否刚刚被打破？

Answer 1

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

@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文件(样式为index.html的css文件，或者在没有样式的情况下创建一个css文件，并且必须是.scss，因为这将编译为sass)，如下所示

又来了..。

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

最后..。在.角-cli.json键下的“样式”下，还添加到自定义主题文件的路径，作为该键的值之一。那你的好去处..。但记住..。当使用@角/材料模块时..。您必须将模块中的每个组件导入到您的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

]

...hope这有助于解决您的问题。

Answer 2

这就是对我有用的东西：

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

我还按照这里的指示：

Angular 2 Material Custom Themes