将样式应用于 Material2 组件不起作用答案

【问题标题】：Applying style to Material2 component does not work将样式应用于 Material2 组件不起作用
【发布时间】：2016-09-20 00:55:23
【问题描述】：

我有一个<md-input> 元素：

<md-input class="filter-name-input" [(ngModel)]="name" placeholder="Name"></md-input>

我正在尝试通过 CSS 对其应用样式：

md-input {
    height: 2000000px;
}

我没有看到在浏览器调试器中应用的样式。我这样做是否不当？

【问题讨论】：

标签： css angular angular-material2

【解决方案1】：

不，你做得对，看看这个 plunker

working example

<md-input #startDate
          required
          name="startDate"
          placeholder="startDate">
</md-input>
</p> 

<style>
  md-input{height:1000px; background:red;}
</style>

实际上 css 高度已应用于您的组件，但由于白色背景可能不可见，请参阅附加的 plunker，它对我来说工作正常。

【讨论】：

我的样式类在一个单独的 .css 文件中。这会影响事情吗？我具体要做的是，将背景颜色添加到<input> 的<md-input>
不，我认为无论是单独的文件还是内部 CSS，我都不会影响。我还没有尝试过，但我很确定

【解决方案2】：

简答

您可以在 index.html 中使用链接标签来覆盖组件样式，例如：

<link rel="stylesheet" href="my-global-styles.css">

链接样式不会被组件样式覆盖。

长答案

这是由于 Angular 2 的 ViewEncapsulation 隔离了可重用组件的样式。它可以防止单个组件的样式泄漏并影响应用程序中的其他组件，但如果组件实现者未明确允许，它也可以防止您对组件进行样式设置。

以下文章可能会有所帮助：

【讨论】：