角度更改MatInput大小

Question

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

​

如何更改文本框宽度？我试过style="width: 200px;“style="width:100%"；class=”class=-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(之前的mdInput)，请尝试以下方法之一：

使用::ng-deep的

使用/deep/阴影穿透后代组合器通过子组件树向下强制样式进入所有子组件视图。/deep/ combinator适用于任何深度的嵌套组件，它同时适用于组件的视图子组件和内容子组件。使用/deep/、>>>和::ng-deep只能与模拟视图封装一起使用。仿真是默认的，也是最常用的视图封装。有关更多信息，请参阅控制视图封装部分。阴影穿透后代combinator已被弃用，并且正在从主要浏览器和工具中移除支持。因此，我们计划删除Angular中的支持(对于/deep/、>>>和：：ng-deep的所有3个)。在此之前，应该首选::ng-deep，以获得与这些工具更广泛的兼容性。

CSS:

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

DEMO

使用ViewEncapsulation的

​

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

类型脚本：

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

CSS

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

DEMO

​

3.在style.css中设置样式

​

这一次，你必须用!important‘强制’风格。

style.css

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

DEMO

4.使用内联样式

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

Answer 2

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

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