css - Material : Trying to style the form fields of a Mat-Card

Question

我是 UI 开发的新手，对 css 没有很深的了解。我一直在谷歌上搜索使用 Angular Material 设计登录页面样式的示例。我试图让表单字段扩展卡片的宽度(减去填充)，但没有任何运气。

谁能告诉我我的表单域应该是什么样子的？另外，我看到很多样式的名称中都有“example-”。这些要在我的 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 文件中重命名它们。