Question

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

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

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

md-input {
    height: 2000000px;
}

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

Answer 1

不，你做得对，看看这个傻瓜

working example

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

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

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

Answer 2

简短回答

您可以在index.html中使用链接标记来覆盖组件样式，即la：

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

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

长答案

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

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

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

2 个答案: