angular - 如何在 Angular Material 中创建 Bootstrap 'input-group-text'

Question

我需要创建 Bootstrap 输入组文本看起来像使用角度材料。这是它的外观

目前 Angular 材质的默认实现只允许添加后缀，但不允许添加样式。

标签： angularangular-material

Answer 1

Material Design UI 套件非常有主见。您必须进行大量样式覆盖才能实现您想要做的事情。

但是要回答您的问题，您需要检查元素并覆盖主 CSS 文件中的规则（而不是在您的组件中）。尝试在您的输入元素中添加如下内容：

 <mat-form-field>
   <mat-label>Recipient's username</mat-label>
   <input matInput>
   <p matSuffix>@example.com</p>
 </mat-form-field>

然后在你的主要styles.css：

.mat-form-field-suffix {
  background: lightgray;
  /* rest of your styles */
}

您可能需要根据样式规则的特殊性添加更多类。不过，您必须添加其余样式。