Применение стиля к компоненту Материал2 не работает

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> 

на самом деле высота КСС применения к компоненту, но могут быть не видны из-за белом фоне, см в прикрепленный плункер, его работающий штраф для меня.

Answer 2

Короткий ответ

Вы можете использовать ссылку тег в вашем index.html, чтобы переопределить стили компонентов, а-ля:

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

стили Ссылка не переопределены компонентов стилей.

Длинный ответ

Это связано с Угловое 2-х ViewEncapsulation, который изолирует стили для повторно используемых компонентов. Это предотвращает утечку стилей из отдельного компонента и влияет на другие компоненты вашего приложения, но также препятствует тому, чтобы вы входили в стиль компонента, если он не был явно разрешен разработчиком компонента.

Следующие статьи может иметь некоторую помощь:

• https://angular.io/docs/ts/latest/guide/component-styles.html
• https://coryrylan.com/blog/css-encapsulation-with-angular-2-components
• https://toddmotto.com/emulated-native-shadow-dom-angular-2-view-encapsulation