Ichorville Ichorville - 1 year ago 168
CSS Question

Styling md-input-element

I am trying to style the

which is added by default from
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
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"
<md-hint *ngIf="formErrors.name">{{ formErrors.name }}</md-hint>

css :

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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download