在custom.sass中编辑Angular材质的mat-form-field

Question

我尝试更改为垫子形式字段的样式。因为:: ng-deep已被弃用，所以我使用custom.sass文件来更改样式。但是使用此代码，只有mat-form-field发生了变化，而内部的元素却没有变化。

.mat-form-field
    background-color: #ffffff
    border: solid 0.9px #001757
    border-radius: 6.9px
    width: 90px
    height: 40px

    .mat-form-field-wrapper
        .mat-form-field-flex
            width: 22%
            .mat-form-field-infix
                padding: 0 0

        .mat-form-field-underline
            display: none

在此示例中，我想更改输入的位置并删除下划线，但是除了边框和mat-form-field的颜色外，其他都没有改变。

Answer 1

我发现了问题：我忘了将我的material-import.sass的import语句添加到styles.sass中。现在可以了！

Answer 2

您必须将这些样式从component.scss移至styles.scss文件。这是在不使用不推荐使用的选择器的情况下，在Angular组件中定位嵌套元素的唯一方法。