如何自定义角材料组件答案

【问题标题】：How to customize angular material components如何自定义角材料组件
【发布时间】：2020-03-24 15:56:38
【问题描述】：

我正在尝试使用有角材料构建一个简单且响应迅速的注册表单。我试图改变输入的高度以获得更大的屏幕，这样它会更明显并且一切都坏了。

我无法在中心对齐 mat-icon 和 mat-label
mat-icon 按钮的波纹效果未对齐
只要此按钮具有mat-raised-button 属性，我就无法更改按钮的字体大小

如何自定义这些元素？我在角材料文档中找不到任何东西，此时我想从头开始制作所有东西，而不需要角材料及其花哨的东西。但也许我没有像我应该的那样彻底地浏览他们的网站。我尝试了最明显的方法，例如：font-size，使用 flexbox，vertical-align，但没有一个对我有用。

HTML：

<mat-form-field appearance="outline" class="form-field">
  <mat-label>Password</mat-label>
  <mat-icon matPrefix>lock_outline</mat-icon>
  <input
    matInput
    formControlName="password"
    [errorStateMatcher]="semiStrictMatcher"
    [type]="hide ? 'password' : 'text'"
  />
  <button
    mat-icon-button
    matSuffix
    (click)="hide = !hide"
    [attr.aria-label]="'Hide password'"
    [attr.aria-pressed]="hide"
    type="button"
  >
    <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
  </button>

CSS：

   @media screen and (min-width: 2500px) {
      .form-field {
        margin-bottom: 50px;
        height: 200px;
        font-size: 40px;
        mat-icon {
          margin-right: 20px;
        }
        input {
          height: 80px; //<- this is the culprit - everything misaligned after this
        }
        mat-icon,
        mat-label,
        input {
          font-size: 45px;
        }
      }
   }

这是默认情况下的样子（较小的屏幕）：

这就是我增加输入高度（更大的屏幕）后发生的情况：

【问题讨论】：

标签： css angular angular-material vertical-alignment font-size

【解决方案1】：

您可以在全局styles.scss 中自定义mat-form-field 如下：

.custom-form-field {
  width: 600px;
  font-size: 40px;

  .mat-form-field-prefix {
    .mat-icon {
      font-size: 60px;
      width: 60px;
      height: 60px;
      line-height: 60px;
    }
    margin-right: 15px;
  }

  .mat-form-field-suffix {
    button {
      .mat-icon {
        font-size: 60px;
        width: 60px;
        height: 60px;
        line-height: 60px;
      }
      margin-left: 10px;
    }
  }
}

如果您不想在styles.scss 中创建全局样式并想使用组件scss，则必须在matPrefix 和matSuffix 上设置类名才能正确处理它们：

在component.html`中

<mat-form-field appearance="outline" class="custom-form-field">
    <mat-label>Password</mat-label>
    <mat-icon matPrefix class="prefix">lock_outline</mat-icon>

    <input matInput [type]="hide ? 'password' : 'text'" />

    <button mat-icon-button matSuffix class="suffix" (click)="hide = !hide">
      <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
    </button>

  </mat-form-field>

在component.scss:

.custom-form-field {
  width: 600px;
  font-size: 40px;

  .mat-icon.prefix {
    font-size: 60px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin-right: 15px;
  }

  button.suffix {
    .mat-icon {
      font-size: 60px;
      width: 60px;
      height: 60px;
      line-height: 60px;
    }
    margin-left: 10px;
  }
}

【讨论】：