造型角材质输入

Question

我创建了一个大纲文本框：

<mat-form-field appearance="outline">
    <input matInput placeholder="Username">
  </mat-form-field>

我正在尝试使用以下方法控制高度、边框颜色：

.mat-form-field {
  height:20px;
  border:1px solid #f0f;
}

但结果远非预期。有没有办法可以做到？ 我在stackblitz上创建的示例代码https://stackblitz.com/edit/angular-material-custom-input-j3k2h

Answer 1

您可以添加此样式来编辑高度：

.mat-form-field-infix {padding:0 !important; border:0 !important;}
.mat-form-field-flex{ margin:0 !important; padding:5px !important; padding-bottom: 17px !important; height: 20px !important;}
.mat-form-field-wrapper { padding: 0 !important; }

还有这个来编辑边框颜色：

.mat-form-field-appearance-outline .mat-form-field-outline {
  color: #f0f;
}