角度变化MatInput Size

I am new to Angular 4 and started working with the material components, I copied a couple of example from the official documentation but didn't get the same result as the documentation :

如何更改文本框宽度？ 我尝试过 style="width: 200px;"样式=“宽度：100%”；类=“col-md-x” 但它们都不起作用，第二件事是如何将登录容器置于页面中间？我在这里找到了一些答案，但似乎没有一个能正常工作，这是我的代码：

<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>

**

要在容器中居中：

CSS:

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

风格matInput（ 之前mdInput）尝试其中之一：

1. Use ::ng-深 https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep:

使用 /deep/ 阴影穿透后代组合器强制使用样式 向下遍历子组件树进入所有子组件 意见。 /deep/ 组合器适用于任何深度的嵌套组件， 它适用于视图子级和内容子级 成分。仅在模拟视图中使用 /deep/、>>> 和 ::ng-deep 封装。模拟是默认且最常用的视图 封装。有关详细信息，请参阅控制视图 封装部分。穿透阴影的后代组合器是 已弃用，并且主要浏览器和工具正在删除支持。 因此，我们计划放弃对 Angular 的支持（对于 /deep/ 的所有 3 个，>>> 和::ng-deep)。在那之前 ::ng-deep 应该是更广泛的首选 与工具的兼容性。

CSS:

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

DEMO https://stackblitz.com/edit/angular-fyzdvb

...组件CSS样式被封装到组件的视图中并且 不影响应用程序的其余部分。 为了控制每个组件的封装方式， 您可以在组件元数据中设置视图封装模式。 从以下模式中选择： .... None 表示 Angular 不进行视图封装。 Angular 添加了 CSS 到全局样式。范围规则、隔离和 前面讨论的保护措施不适用。这本质上是 与将组件的样式粘贴到 HTML 中相同。

打字稿：

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

CSS:

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

DEMO https://stackblitz.com/edit/angular-fyzdvb-qtyhv6

这次你必须“强制”样式!important.

样式.css

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

DEMO https://stackblitz.com/edit/angular-fyzdvb-ynmh9y

4.使用内联样式

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

DEMO https://stackblitz.com/edit/angular-fyzdvb-twdmj2