Угловое изменение MatInput Размер

Я новичок в 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>

Ответ 1

Центрировать в контейнере:

CSS:

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

Для стиля matInput (privately mdInput) попробуйте один из них:

Использовать :: ng-deep:

Используйте комбинатор /deep/shadow-piercing descendant combinator, чтобы стилизовать стиль через дочернее дерево компонентов во всех дочерних компонентах. /Deep/combinator работает с любой глубиной вложенных компонентов, и применяется как к дочерним элементам представления, так и к дочерним элементам контента компонента. Используйте /deep/, >>> и :: ng-deep только с эмулированным инкапсуляцией представления. Эмуляция - это стандартная и наиболее часто используемая инкапсуляция. Для получения дополнительной информации см. Раздел инкапсуляции представления управления. Тени-пронизывающий комбинатор-потомок устарел, и поддержка удаляется из основных браузеров и инструментов. Таким образом, мы планируем отказаться от поддержки в Angular (для всех 3 of/deep/, >>> и :: ng-deep). До тех пор :: ng-deep следует предпочесть для более широкой совместимости с инструментами.

CSS:

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

DEMO

2. Используйте ViewEncapsulation

... стили CSS компонента инкапсулируются в представление компонентов и не влияют на остальную часть приложения. Чтобы контролировать, как это инкапсуляция происходит на основе каждого компонента, вы можете установить режим инкапсуляции вида в метаданных компонента. Выберите один из следующих режимов:.... None означает, что 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

Ответ 1

Ответ 2