角度材质表单样式-输入背景和按钮高度

Question

我有一个非常基本的电子邮件输入和提交按钮形式。我正在尝试执行以下操作：

• 将电子邮件输入背景设置为白色
• 将“提交”按钮的高度设置为与输入相同的高度

当我尝试更改CSS中输入的背景时，它只会更改Angular Material输入字段中的一个小矩形。另外，当我将height属性更改为100％时，按钮不会更改高度。

我确定我缺少一些简单的东西。有人可以帮忙吗？

<form>
                <mat-form-field appearance="outline">
                    <mat-label>E-Mail</mat-label>
                    <input matInput placeholder="E-Mail" required>
                </mat-form-field>
                <button mat-raised-button color="primary" type="submit">Get Updates!</button>
</form>

Answer 1

那应该使input和button的价值相等：

form {
   display:flex;
   flex-direction:row;
}

以及输入元素无法设置样式的原因。是因为您要在mat-form-field中设置元素的样式，这是一个不同的组件。如果要像对您的情况那样设置内部组件元素的样式，则应该这样做：

:host ::ng-deep mat-form-field {
   input {
       background-color:#fff;
   }
}