Javascript 角度变化输入大小

我是Angular 4的新手，开始使用材料组件，我从官方文档中复制了几个示例，但没有得到与文档相同的结果：

如何更改文本框的宽度？ 我试过style=“width:200px；”style=“width: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>

登录

---

**要在容器中居中：

CSS:

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

要设置

matInput

（私下

mdInput

）的样式，请尝试以下操作之一：

使用：

使用/deep/shadow peringing子体组合符强制创建样式 向下通过子组件树进入所有子组件 意见。/deep/combinator适用于嵌套组件的任何深度， 它同时适用于视图子级和内容子级 组成部分。仅在模拟视图中使用/deep/、>>>和：：ng deep 封装。仿真是默认的和最常用的视图 封装。有关详细信息，请参见控制视图 封装部分。暗影穿透后代组合器是 已弃用，正在从主要浏览器和工具中删除支持。 因此，我们计划在角度（对于所有3个/deep/，>>> 和：：ng deep）。在此之前，更广泛的应用程序应首选：：ng deep 与工具的兼容性

CSS:

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

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

---

2.使用

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

Typscript:

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

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

CSS：

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

---

3。在style.css中设置样式

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

这一次，您必须使用

来“强制”样式！重要信息

style.css

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

---

4。使用内联样式

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

...

---

[style.fontSize.px]=17此属性将更改大小

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

将容器居中可以很好地工作，但mdinput的宽度不短：/设置为哪个值？我设置为400pxI，将完全相同的代码复制到我的global styles.css文件中，但它也没有更改width:：ng deep.mat表单字段{width:100%！important；}works@Vega：：这是一些非常有用、有用和信息丰富的东西。你到底是怎么发现：：ng deep的？我被吹走了。你刚刚帮我解决了一些头疼的问题。你还知道什么？我的意思是，是否有其他人可以从中了解更多类似问题的来源？非常感谢。