Материал: попытка стилизовать поля формы Mat-Card

Question

Я новичок в разработке пользовательского интерфейса и не обладаю глубокими знаниями CSS.Я гуглял примеры, чтобы стилизовать страницу входа, используя Angular Material.Я пытаюсь получить поля формы, чтобы увеличить ширину карты (минус отступ), но безуспешно.

Может кто-нибудь сказать мне, как должны выглядеть мои поля формы?Кроме того, я вижу, что у многих стилей есть "пример-" в их имени.Они должны быть определены в моем css?

Вот моя таблица стилей:

.example-icon {
  padding: 0 14px;
}    
.example-spacer {
  flex: 1 1 auto;
}    
.example-card {
  max-width: 400px;
  width: 75%;
  margin: 10px auto;
}    
.example-header-image {
  background-image: image("./assets/logo.png");
  background-size: cover;
}    
.main-div {
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

И HTML-страница:

<div class="main-div">
  <mat-card class="example-card">
    <mat-card-header>
      <!--<div mat-card-avatar class="example-header-image"></div>-->
      <img mat-card-avatar src="./assets/logo.png">
      <mat-card-title>Login</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <form class="example-form">
        <table class="example-full-width" cellspacing="0">
          <tr>
            <td>
              <mat-form-field class="example-full-width">
                <input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
              </mat-form-field>
            </td>
          </tr>
          <tr>
            <td>
              <mat-form-field class="example-full-width">
                <input matInput placeholder="Password" [(ngModel)]="password" type="password" name="password" required>
              </mat-form-field>
            </td>
          </tr>
        </table>
      </form>
      <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button (click)="login()" color="primary">Login</button>
    </mat-card-actions>
  </mat-card>
</div>

Answer 1

Вам необходимо создать класс стиля в вашем файле .css, который используется в шаблоне.

.example-full-width {
  width: 100%;
}

Вам не нужно использовать пример префикса для классов стилей, но не забудьте переименовать их как в шаблон (файл .html), так и в файл .css.