Ichorville Ichorville - 14 days ago 7
CSS Question

Styling md-input-element

I am trying to style the

.md-input-element
on
md-input
which is added by default from
angular-material.css
which seems I cannot get to work. I cam trying to add the letter-spacing style but it only works as the current. style on the console. Is there any way to override this particular style for
md-input-element
in my own css file?

My html code is as below :

<!-- 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

If you set the style in the component that contains the mentioned html code, then it will not work because of the standard ViewEncapsulation. The default ist Emulated and will change your CSS-selector to something like the following during runtime:

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

This selector will not match with class="md-input-element" of the md-input because of the attached attribute.

Now you have three options

  1. Use /deep/: You can rewrite your selector using deep. E.g. :host /deep/ .md-input-element to stop Angular2 adding the cryptic attribute to your selector.
  2. Change ViewEncapsulation: You can change your ViewEncapsulation to None to stop Angular2 adding the cryptic attribute to your selector.
  3. Global style: Add the style to a global style.css to get around the ViewEncapsulation

Look here for more information about styling your components https://angular.io/docs/ts/latest/guide/component-styles.html