调整 mat-form-field 的大小

Question

如何调整整个材质表单的大小？我希望表单域的大小与前面的 h3 文本大致相同。默认值似乎渲染得非常大。我尝试将size 和font size CSS 应用于mat-form-field 元素、mat-select 元素和mat-option 元素，但没有达到预期的效果。

---

settings.component.html

<mat-toolbar class="menu_bar" color="primary">
    <h1>Configuration</h1>
</mat-toolbar>
<mat-toolbar class="top-container">
    <span class="select">
        <h3>Selected Object:</h3>
        <mat-form-field appearance="outline">
            <mat-select>
                <mat-option value="object1">Object 1</mat-option>
                <mat-option value="object2">Object 2</mat-option>
                <mat-option value="object3">Object 3</mat-option>
            </mat-select>
        </mat-form-field>
    </span>
</mat-toolbar>

---

settings.component.css

h1 {
    font-size: 4vh;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}

body {
    font-size: 2vh;
    font-weight: 300;
    color: lightgray;
    font-family: 'Open Sans', sans-serif;
}

.menu_bar {
    background-color: rgb(200, 213, 234);
    color: black;
}

.select {
    display:flex;
    flex-flow: row;
    justify-content: space-between;
}

.top-container {
    height: fit-content;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

Answer 1

您必须覆盖 style.css 或 style.scss 中的类样式

.mat-form-field-appearance-outline .mat-form-field-infix {
    padding: 0px 0 9px 0;
    height: 16px;
}

堆栈闪电战：https://stackblitz.com/edit/angular-ud4dev?file=src%2Fstyles.scss