Custom styles on inputs with angular material 2

Question

I am trying to style an input so that it is a certain width. I am using Angular Material 2 but for some reason the styles in the css isn't being applied to the input tag. Here is a working plunker of my issue along with the affected code:

@Component({
  selector: 'my-app',
  template: `
  <div>
    <form>
      <md-input [(ngModel)]="cycleTime" type="number" name="email">
        <span md-prefix>Cycle Time:</span>
        <span md-suffix>&nbsp;minutes</span>
      </md-input>
    </form>
  </div>
  `,
  styles:[`
      input {
        width: 50px;
        text-align: right;
      }
    `],
  directives: [MdButton, MdInput]
})
export class AppComponent { 
  cycleTime = 1

  constructor() {}
}

How can I style the input that is being created by Angular Material 2?

Answer 1

You can try to override styles of MdInput component like this:

:host input.md-input-element {
  width: 50px;
  text-align: right;
}

Plunker example

Or this way:

/deep/ input {
  width: 50px !important;
  text-align: right;
}

:host-context .md-input-infix input {
  width: 50px;
  text-align: right;
}