Css 调整mat表单字段的大小

如何调整整个材质窗体的大小？我希望表单字段的大小与前面的

h3

文本大致相同。默认值看起来非常大。我已经尝试将

size

和

font size

CSS应用到

mat表单字段

元素、

mat选择

元素和

mat选项

元素，但没有达到预期的效果

---

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>

---

您必须在

style.css

或

style.scss

.mat表单字段外观轮廓.mat表单字段中缀{
填充：0px 0 9px 0；
高度：16px；
}

闪电战：

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;
}