带阴影的材质角文本框

Question

我正在设计表格，我希望输入框如下所示，位于角材料matInput中。如何做到这一点？

Here is the screenshot of how i want

Answer 1

用阴影表示，我想您是指材料文本字段的填充外观。通过将appearance="fill"添加到mat-form-field中，可以得到这种外观。

<mat-form-field appearance="fill">
    <mat-label>Fill form field</mat-label>
    <input matInput placeholder="Placeholder">
</mat-form-field>

Form field appearance variants

Answer 2

如果需要更多控制，请将其添加到样式表中

.mat-form-field-flex{
  background-color: lightgray;
}

您可以在开发控制台中找到该组件各部分的css类。