Angular Material 2 Form 不显示

Posted 2023-03-13

【中文标题】Angular Material 2 Form 不显示

【英文标题】：Angular Material 2 Form does not display

【发布时间】：2018-06-02 23:00:43

【问题描述】：

我正在尝试按照 Material 2 网站中的说明添加表单和输入。表单不显示，但是当我单击表单输入时它会显示。

附加信息（更新）：

我正在使用自定义主题。

$customTheme: mat-dark-theme($primary, $accent, $warn); 

但是当我将其更改为较轻的主题时，表单元素会显示出来。

$customTheme: mat-light-theme($primary, $accent, $warn);

我猜这与背景和当前颜色有关。

【问题讨论】：

您应该添加更多信息，以便有人可以帮助您。

【参考方案1】：

我能猜出来。

当使用深色主题时，表单的背景应该是深色而不是白色。

我添加了一个带有浅色背景主题的secondaryTheme，并在表单中使用它，它解决了这个问题。

$mainTheme: mat-dark-theme($primary, $accent, $warn);

$secondaryTheme : mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($mainTheme);

.secondaryTheme 
    @include angular-material-theme($secondaryTheme);


<div class="secondaryTheme">

  <mat-form-field>
  <input matInput placeholder="Input">
  </mat-form-field>

  <mat-form-field>
  <textarea matInput placeholder="Textarea"></textarea>
  </mat-form-field>
</div>