创建自定义主题以覆盖使用 Angular Material - Angular 4 构建的表单控件答案

【问题标题】：Create a custom theme to override form controls built using Angular Material - Angular 4创建自定义主题以覆盖使用 Angular Material - Angular 4 构建的表单控件
【发布时间】：2018-01-10 11:42:52
【问题描述】：

我已经阅读了关于构建自定义主题的 material.angular.io 文档，并且我尝试创建一个自定义主题来覆盖表单控件，例如使用 custom_theme 的 Md 输入文本框、文本区域、md-select、复选框、单选按钮控件.scss 文件，其中包含这些输入控件的覆盖样式。

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

类似地，其他表单控件覆盖颜色，indigo-pink 预建主题附带的字体样式，但似乎我的样式没有得到应用。

我已经在 .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 pre-built 主题中定义的表单控件样式。

我是否需要通过将预建主题样式的副本复制到 custom-theme.scss 中并根据我的需要覆盖来删除 styles.css 中对 indigo-pink 预建主题的引用？或者您能否建议任何其他替代方案？

【问题讨论】：

封装存在一个错误，如果您的样式不是全局的，则无法覆盖动态生成的元素的样式。可能有 3 种解决方案：1) 将您的样式放在您的全局 styles.scss 文件中。 2）禁用视图封装设置：encapsulation: [ViewEncapsulation.None] 在您的组件中（但要小心，因为此组件中的所有样式都将成为您所有组件的全局） 3）定义您自己的主题，这在这个非常 websit.e 上的许多帖子中都有描述
@Flament，当前的仿真封装模式是我目前需要的那种。您能否分享我详细介绍的自定义主题的帖子？
你好，是的，这里是：stackoverflow.com/questions/40915277/… 这个链接解释了如何覆盖预建的主题颜色。另请参阅 Kostas Siabanis 链接：stackoverflow.com/a/45478747/5710894，您可以在其中找到替代默认主题样式的解决方法

标签： angular material-design angular-material2

【解决方案1】：

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

来自 Angular documentation：

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

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

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

...

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

这应该允许更改到达视图。有关更多信息，您可以阅读此thread。

【讨论】：

当前的模拟封装模式是我当前需要的那种。我会花一些时间来解决这个问题，如果你有代码笔请分享..
ViewEncapsulation.None 的问题是该组件的样式将传播到所有其他组件。如果他只想覆盖这个组件的预构建主题怎么办？
无论如何他都应该使用自定义类。我会尽快提供一些代码。

【解决方案2】：

我会说这不是封装的问题，而是角度材料主题配置的问题。

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

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

https://blog.thoughtram.io/angular/2017/05/23/custom-themes-with-angular-material.html

https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1

然后这是一篇使用 Angular Material(>5.0) 将动态主题导入您的应用程序的帖子。

Angular 2 Material Dynamic Themes

【讨论】：