Edit Angular material mat-form-field in custom.sass

Question

I try to change to style of a mat-form-field. Because ::ng-deep is getting deprecated I use custom.sass files to change the style. But with this code only mat-form-field changes but not the elements inside.

.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

In this example I want to change the position of the input and remove the underline, but nothing except the border and the color of the mat-form-field changes.

Answer 1

I found the problem: I forgot to add the import statement of my material-import.sass in the styles.sass. Now it's working!

Answer 2

You have to move those styles from your component.scss to the styles.scss file. That's the only way to target nested elements within an Angular component without using deprecated selectors.