角度改变MatInput大小

Question

我是Angular 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(私下mdInput)尝试以下其中一种:

1. 使用:: ng-deep:

使用/ deep/shadow-penetcing descendant组合器将样式向下强制通过子组件树到所有子组件视图中./ deep/combinator适用于任何深度的嵌套组件,它适用于视图子节点和组件的内容子节点.仅对模拟视图封装使用/ deep /,>>>和:: ng-deep.模拟是默认和最常用的视图封装.有关更多信息,请参阅"控制视图封装"部分.不推荐使用阴影穿透后代组合器,并且正在从主要浏览器和工具中删除支持.因此,我们计划放弃Angular中的支持(对于/ deep /,>>>和:: ng-deep的所有3个).在此之前:: 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.在style.css中设置样式

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

style.css文件

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

DEMO

4.使用内联样式

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

DEMO

Answer 2

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

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