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

Question

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

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

我正在尝试通过 CSS:

对其应用样式

md-input {
    height: 2000000px;
}

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

Answer 1

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

working example

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

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

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

Answer 2

简答

您可以在 index.html 中使用 link 标签来覆盖组件样式，a la:

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

Link 样式不会被组件样式覆盖。

长答案

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

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

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

Applying style to Material2 component does not work

css

angular-material2

angular