Question

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

如何更改文本框宽度？我试过style =＆＃34; width：200px;＆＃34;风格=＆＃34;宽度：100％＆＃34 ;;类=＆＃34; COL-MD-X＆＃34; 但是他们都没有工作，第二件事是如何将登录容器集中在页面中间？我在这里找到了一些答案，但它们似乎都没有起作用，这是我的代码：

<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 / shadow-penetcing后代组合器强制样式通过子组件树进入所有子组件观点。 / deep / combinator适用于任何深度的嵌套组件，它适用于视图子节点和内容子节点零件。使用/ deep /，＆gt;＆gt;＆gt;和:: ng-deep仅限于模拟视图封装。模拟是默认和最常用的视图封装。有关更多信息，请参阅控制视图封装部分。穿阴影的后代组合是已弃用并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃Angular中的支持（对于所有3个/ deep /，＆gt;＆gt;＆gt; 和:: ng-deep）。在那之前:: ng-deep应该是更广泛的首选与工具的兼容性。

<强> CSS：

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

DEMO

ViewEncapsulation

...组件CSS样式被封装到组件的视图中不影响应用程序的其余部分。为了控制这种封装如何在每个组件的基础上发生，您可以在组件元数据中设置视图封装模式。从以下模式中选择： .... None表示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>

角度改变MatInput大小

2 个答案: