Angular Material2输入法（单element/page）

Question

是否可以更改单个 Input 元素的样式（文本颜色、占位符颜色、下划线颜色等）？我可以根据全局样式设置其余部分的样式，但是如果您想专门在单个页面或单个控件上设置主题怎么办？这方面的最佳做法是什么？

例如，我如何设置此块的样式以便占位符、文本和强调色都是自定义的？

<md-input-container>
  <input mdInput placeholder="Email address">
</md-input-container>

Answer 1

您可以为每个 material 组件定义一个自定义主题，并且您应该能够覆盖相关组件的基本主题，如下所示：

@import '~/@angular/material/input/input-theme'
.custom-input {
  @include mat-input-theme($custom-input-theme)
}

然后只需将 class 添加到 <md-input-container>。

此外，如果您在组件的样式表中定义自定义 class，请确保将封装设置为 none:

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

Angular Material 2 Input style (single element/page)