2

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

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

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

@import '~@angular/material/theming'

工作还是应该

@import '~@angular/material/_theming'

甚至

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

?

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

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

4

2 回答 2

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 文件（设置 index.html 样式的 css 文件，如果没有，则创建一个，并且必须是 .scss，因为这将编译为 sass）像这样

我们重新来过吧...

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

最后......在“样式”键下的 .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

]

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

于 2017-08-11T15:38:23.097 回答
1

这对我有用：

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

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

Angular 2 材质自定义主题

于 2017-08-09T15:56:13.600 回答