javascript - Angular MatInput méretének megváltoztatása

Új vagyok az Angular 4-ben, és elkezdtem dolgozni a material komponensekkel. Másoltam néhány példát a hivatalos dokumentációból, de nem kaptam ugyanolyan eredményt, mint a dokumentációban:

Hogyan tudom megváltoztatni a szövegdoboz szélességét? Megpróbáltam style="width: 200px;" style="width:100%"; class="col-md-x"; de egyik sem működött. Második dolog, hogyan lehet középre helyezni a bejelentkező konténert az oldal közepén? Találtam néhány választ itt, de egyik sem tűnik működőnek, itt van a kódom:

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
        <md-card>
          <md-card-title>Login</md-card-title>
          <md-card-content>
            <form class="example-form">
              <div>
              <md-form-field class="example-full-width">
                  <input mdInput placeholder="Username" type="text">
              </md-form-field>
              </div>
              <div>
              <md-form-field class="example-full-width">
                <input mdInput placeholder="Password" type="password">
              </md-form-field>
              </div>
            </form>
          </md-card-content>
        </md-card>
      </div>
    </div>  
</div>

**

Válasz #1

A tárolóban középre helyezni:

CSS:

.container{
   position: fixed;
   top: 50%;
   left: 50%; 
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%); 
   width:100%;
  }

A matInput (korábban mdInput) stílusozásához próbáld ki az alábbiakat:

1. Használd a ::ng-deep:

Használja a /deep/ árnyéktörő leszármazott kombinátort, hogy egy stílust leerőszakoljon a gyermek komponens fán keresztül az összes gyermek komponens nézetébe. A /deep/ kombinátor működik a beágyazott komponensek bármilyen mélységében, és mind a nézetgyermekekre, mind a tartalomgyermekekre érvényes a komponensen belül. A /deep/, >>> és ::ng-deep használata csak a szimulált nézetkapszulázással javasolt. A szimulált a alapértelmezett és a leggyakrabban használt nézetkapszulázás. További információért lásd a Nézetkapszulázás szabályozása szakaszt. Az árnyéktörő leszármazott kombinátor elavult, és a nagy böngészők és eszközök támogatása megszűnik. Ennek megfelelően az Angularban is tervezzük a támogatás megszüntetését (mindhárom, a /deep/, >>> és ::ng-deep esetében). Addig is a ::ng-deep használata javasolt a szélesebb eszköztámogatás érdekében.

CSS:

    ::ng-deep .mat-input-wrapper{
      width:400px !important;
    }

DEMO

... a komponens CSS-stílusai a komponens nézetébe vannak csomagolva, és nem befolyásolják az alkalmazás többi részét. Az, hogy ez a csomagolás komponensenként hogyan történjen, a komponens metaadataiban megadható nézetcsomagolási mód beállításával szabályozható. A következő módok közül választhat: .... A None azt jelenti, hogy az Angular nem végez nézetcsomagolást. Az Angular a CSS-t a globális stílusokhoz adja hozzá. Az előbb tárgyalt hatókör, elszigeteltség és védelmek nem érvényesek. Ez lényegében ugyanaz, mintha a komponens stílusait beillesztenénk a HTML-be.

TypeScript:

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  

CSS:

.mat-input-wrapper{
  width:400px !important;
}

DEMÓ

Ezúttal a stílusokat a !important használatával kell 'kényszerítened'.

style.css

.mat-input-wrapper{
  width:400px !important;
}

DEMÓ

4. Használjon beágyazott stílust

<mat-form-field style="width:400px !important" ...>
   ...
</mat-form-field>

BEMUTATÓ

Válasz #2

[style.fontSize.px]=17 ez a tulajdonság meg fogja változtatni a méretet

<mat-form-field [style.fontSize.px]=17>
  <input matInput placeholder="Template Name" value="{{templateName}}">
</mat-form-field>