javascript - Angular 变化 MatInput Size

Question

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

如何更改文本框宽度？我试过 style="width: 200px;"风格=“宽度:100%”；类=“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 :

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component. Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation. For more information, see the Controlling view encapsulation section. The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

CSS:

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

DEMO

---

2. 使用 ViewEncapsulation

... component CSS styles are encapsulated into the component's view and don't affect the rest of the application. To control how this encapsulation happens on a per component basis, you can set the view encapsulation mode in the component metadata. Choose from the following modes: .... None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

typescript :

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

CSS:

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

DEMO

---

<强>3。在 style.css 中设置样式

这次您必须使用 !important 来“强制”样式。

样式.css

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

DEMO

---

<强>4。使用内联样式

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

DEMO