Question

我想使用角度材料提供主题功能2.任何人都可以提供一个示例如何做到这一点？我尝试使用材料2主题，但它没有用。

Answer 1

Angular CLI指南：

选择你想要使用的主题：靛蓝色，深红色，琥珀色，粉红色 - 蓝色，紫色 - 绿色。

<强> styles.css的

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.c‌ss';

<强> styles.scss

@import '~@angular/material/core/theming/prebuilt/indigo-pink';

创建自己的主题https://youtu.be/0q9FOeEELPY?t=17m6s

和https://github.com/angular/material2/blob/master/guides/theming.md#defining-a-custom-theme

Answer 2

您可能需要创建自定义主题theme.scss：

@import '~@angular/material/core/theming/all-theme';

@include md-core();

$primary: md-palette($md-indigo);
$accent:  md-palette($md-pink, A200, A100, A400);
$warn:    md-palette($md-red);

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

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

将其放入assets文件夹

然后在styles.scss中导入：

@import '/assets/theme';

如果您只是通过引用node_modules\@angular\material\core\theming\prebuilt\中的一个来查看styles.scss，您也可以选择任何现有主题：

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber';

有关详细信息，请参阅docs和aterial2-app。

Answer 3

这里的步骤：

https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-Material

但是你应该通过以下方式解决主题问题：

看起来他们已经改变了Github的Material版本。而不是

@import '~@angular/material/core/theming/all-theme';

试试这个：

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

Answer 4

PrimeNG做到了。你可以查看他们的回购。

https://github.com/primefaces/primeng

这是现场网站

http://primefaces.org/primeng

角度2应用的主题

4 个答案: