带阴影的材质角度文本框

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类。