Редактировать угловой материал mat-form-field в custom.sass

Question

Я пытаюсь изменить стиль mat-form-field. Поскольку :: 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

Я обнаружил проблему: я забыл добавить инструкцию import для моего material-import.sass в styles.sass. Теперь это работает!

Answer 2

Вы должны переместить эти стили из вашего component.scss в файл styles.scss.Это единственный способ нацелить вложенные элементы в компоненте Angular без использования устаревших селекторов.