angular - angular マテリアル 2 を使用した入力のカスタム スタイル

Question

特定の幅になるように入力をスタイルしようとしています。Angular Material 2 を使用していますが、何らかの理由で CSS のスタイルが入力タグに適用されません。これは、影響を受けるコードとともに、私の問題の作業中のプランカーです。

@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() {}
}

Angular Material 2 によって作成されている入力のスタイルを設定するにはどうすればよいですか?

Answer 1

MdInput次のようにコンポーネントのスタイルをオーバーライドすることができます:

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

プランカーの例

またはこの方法：

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

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