2

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

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

并尝试通过 CSS 对其应用样式：

md-input {
    height: 2000000px;
}

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

4

2 回答 2

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 中查看它对我来说工作正常。

于 2016-07-13T19:37:57.563 回答
1

简短的回答

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

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

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

长答案

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

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

于 2016-09-07T22:09:25.857 回答