Question

我已经完成了关于构建自定义主题＆amp;的material.angular.io文档。我试图创建一个自定义主题，用于覆盖表单控件，如Md输入文本框，文本区域，md-select，复选框，radiobutton控件，使用custom_theme.scss文件，该文件具有覆盖这些输入控件的样式。

.mat-select-trigger {
    font-size: 12px;
    min-width: 200px;
}

类似于其他表单控件覆盖颜色，字体样式带有靛蓝粉红色的预制主题，但似乎我的样式没有得到应用。

我已将我的主题加载到.angular-cli.json文件中，如下所示：

  "styles": [
        "styles.css",
        "custom-theme.scss"
  ]

＆安培; angular material 2.0.0-beta.8的预建主题放在styles.css ..

中

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

我没有看到任何精心制作的文档或教程，可以覆盖Material预建主题中定义的表单控件样式。

我是否需要删除styles.css中indigo-pink预建主题的引用，方法是将预先构建的主题样式复制到custom-theme.scss并根据我的需要覆盖？或者你可以建议任何其他选择吗？

Answer 1

您的问题是样式封装，AFAIK不是错误。

来自Angular documentation：

组件CSS样式被封装到组件的视图中不会影响应用程序的其余部分。

基本上，您在custom-theme.scss中包含的更改永远不会到达视图。您可以在组件上将视图封装设置为NONE：

import {Component, OnInit, ViewEncapsulation} from '@angular/core';

...

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})

这应该允许更改到达视图。有关详细信息，请参阅此thread。

Answer 2

我想说这不是封装的问题，更多的是角度材料主题配置。

为了更改特定角度组件的主题，您需要使用Angular Material Mixin配置选项，并声明您希望它们用于自定义主题。

这里是Angular Material的一个很好的文档列表，我从Angular 5.1中发现了相关的文档。（以及Angular Material的第一个稳定版本，v5.0）

然后在这里发布一个帖子，使用Angular Material（＆gt; 5.0）将动态主题添加到您的应用中。