角度变化MatInput尺寸

Question

我是新来的角4，并开始与材料部件的工作，我复制了几个例子，从官方文档，但没有得到相同的结果的文档：

如何我能改变文本框的宽度吗？ 我试过style =“width：200px;”风格= “宽度：100％”; class =“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> 

**

Answer 1

居中容器：

CSS：

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

款式matInput（priviously mdInput）尝试其中之一：

1. 使用::ng-deep：

使用/深/阴影直刺后裔结合器通过子组件树强制风格 下到所有的子组件 意见。/deep/combinator适用于任何嵌套组件深度， ，它适用于组件的视图子代和内容子代。仅在模拟视图 封装中使用/ deep /，>>>和:: ng-deep。仿真是封装的默认和最常用的视图。有关更多信息，请参见控制视图 封装部分。暗影穿孔后代组合器 已弃用，支持正在从主流浏览器和工具中删除。因此，我们计划放弃对Angular的支持（对于所有3个/ deep /，>>> 和:: ng-deep）。在此之前:: ng-deep应该优先考虑与工具的更广泛的兼容性。

CSS：

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

DEMO

---

2.使用 ViewEncapsulation

...组件CSS样式被封装成组件的视图和 不影响应用程序的其余部分。 要控制每个组件的基础上如何进行封装，您可以在组件元数据中设置视图封装模式。 从以下模式中选择： .... 无意味着Angular没有视图封装。 Angular将 CSS添加到全局样式中。前面讨论的范围规则，隔离和保护不适用。这实质上就是将组件的样式粘贴到HTML中。

Typscript：

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

CSS：

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

DEMO

---

3组ST yles in style.css

这次你必须用'0123'的方式'强制'!important。

的style.css

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

DEMO

---

4.使用内嵌样式

<mat-form-field style="width:400px !important;" class="example-full-width"> 
     <input matInput placeholder="Username" type="text"> 
</mat-form-field> 

DEMO