Переопределить стиль углового материала в угловом компоненте

Question

Я использую Материал 2 <md-input-container> в моем угловом компоненте. Я хочу переопределить один из классов, например .mat-input-wrapper определяется в угловой материал. Но я хочу переопределить только в этом компоненте, и переопределение не должно влиять на другие компоненты на странице.

Вот скриншот визуализированного элемента:

Answer 1

Как отметил @Dylan, вы должны использовать /deep/ изменить CSS в дочерних компонентах. Вот ответ, который я искал:

:host /deep/ md-input-container .mat-input-wrapper

Answer 2

Если вы используете SCSS, попробуйте ::ng-deep

::ng-deep { 
       .sample {
         // style
         color: green;
       }
    }

Answer 3

Проблема с ::ng-deepто есть он применит стиль ко всем страницам и всем компонентам. Это означает, что это грязный подход. Лучший способ сделать это - обернуть пользовательский класс и стилизовать элемент в вашем styles.scss/styles.css

Пример: Как задано в вопросе. Чтобы переопределить .mat-input-wrapper, оберните свой элемент своим пользовательским классом, например:

<md-input-container class='big-input'>. Затем в

стили.scss:

      .big-input .mat-input-wrapper {
   height : 200px;
}

добавлять !importantесли необходимо.

Answer 4

Самый простой подход, который я бы предложил для SCSS:

1. Вы можете скопировать имя класса свойства и переопределить его в style.scss, чтобы оно работало.

2. Создайте @mixin в новом файле SCSS и переопределите все свойства, которые вам нужны. затем импортируйте этот @mixin в style.scss. Это более чистый подход.

Answer 5

Там нет необходимости обернуть <div class="someCssClassName">, Скорее, для стилизации элемента Angular Material, такого как название карты.

<mat-card>
   <mat-card-title>
      {{title}}
   </mat-card-title>
</mat-card>

CSS:

mat-card mat-card-title {
   color: red;
}

Применение этого к другому "дочернему" элементу, например <mat-card-content>

mat-card mat-card-content,
mat-card mat-card-title {
   color: red;
}

Используя VS Code, наведение курсора в редакторе CSS покажет детали того, как этот CSS будет отображаться. В этом примере <mat-card>...<mat-card-title>

Конечно, если у вас есть многократное использование карты в одном компоненте, вам нужно будет провести различие с именем класса CSS, добавив class="card-style-1" к самому элементу, как <mat-card class="card-style-1",

CSS:

mat-card.card-style-1 mat-card-content,
mat-card.card-style-1 mat-card-title {
   color: red;
}

Альтернативой этому является создание отдельных компонентов, специфичных для использования различных карт, стилизация каждого из них по мере необходимости.

Answer 6

Оберните это в div:

<div class="special">
  <md-input-container>
</div>

Css:

.special md-input-container .mat-input-wrapper {
    //your css
}

Answer 7

Вероятно, предпочтительным решением будет определение стилей в вашей собственной таблице стилей темы материала. Использование / deep / не рекомендуется (Angular V 4.3): https://angular.io/guide/component-styles

Теперь вы можете использовать::ng-deep в качестве альтернативы определению вашей собственной таблицы стилей темы.

Однако использование::ng-deep может снова негативно повлиять на использование значков материала при его использовании для переопределения семейства шрифтов по умолчанию (поскольку Material Icons также является семейством шрифтов)