Styling md-input-element

Question

Я пытаюсь стиль .md-input-element на md-input, который по умолчанию добавлен от angular-material.css, который кажется, что я не могу работать. Я кулачок, чтобы добавить стиль буквенного интервала, но он работает только как текущий. стиль на консоли. Есть ли способ переопределить этот стиль для md-input-element в моем собственном файле css?

Мой HTML-код, как показано ниже:

<!-- Input Name* --> 
       <div class="mdl-grid"> 
        <div class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone"> 
         <div class="name-padding"> 
          <md-input class="mdl-textfield--full-width" mandatory type="text" id="name" formControlName="name" placeholder="Name" 
           [(ngModel)]="outlet.name"> 
           <md-hint *ngIf="formErrors.name">{{ formErrors.name }}</md-hint> 
          </md-input> 
         </div> 
        </div> 
       </div> 

CSS:

.md-input-element { 
    letter-spacing: 0 !important; 
} 

Answer 1

Если установить стиль в компоненте, который содержит упомянутый html, тогда он не будет работать из-за стандарта ViewEncapsulation. по умолчанию IST Emulated и изменит ваш CSS-селектор что-то вроде следующего во время выполнения:

.md-input-element[_ngcontent-xsa-40] { 
{ 
    letter-spacing: 1px; 
} 

Этот селектор не будет совпадать с class="md-input-element" из md-input из прикрепленного атрибута.

Теперь у вас есть три варианта

1. Используйте/глубоко/: Вы можете переписать селектор с помощью глубоко. Например. :host /deep/ .md-input-element, чтобы остановить Angular2, добавив критический атрибут в ваш селектор.
2. Change ViewEncapsulation: Вы можете изменить свою ViewEncapsulation на None, чтобы остановить Angular2, добавляя атрибут cryptic к вашему селектору.
3. Глобальный стиль: Добавьте стиль глобальной style.css обойти ViewEncapsulation

Посмотрите здесь для получения дополнительной информации о стилизации ваших компонентов https://angular.io/docs/ts/latest/guide/component-styles.html

Answer 2

попробуйте ниже селектором

md-input-container:not(.md-input-invalid).md-input-focused .md-input { 
    letter-spacing:0!important; 
    border-color: orange; 
}