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

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.

Change ViewEncapsulation: You can change your ViewEncapsulation to None to stop Angular2 adding the cryptic attribute to your selector.

Global style: Add the style to a global style.css to get around the ViewEncapsulation