Как настроить Angular Материальные стили (не только простые темы)

Question

У меня есть следующий код:

<div>
 <my-custom-component></my-custom-component>
<div>

Внутри шаблона MyCustomComponent я использую mat-card, подобный следующему:

<mat-card>
  <mat-card-header>
    <mat-card-title>{{ name }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>{{ description }}</mat-card-content>
</mat-card>

Когда он рендерит, я замечаю, что есть Поле в 16px, которое дается с использованием angular кода, сгенерированного материалом, который выглядит примерно так:

<mat-card>
  <mat-card-header>
    <div class="mat-card-header-text"> <<< ******** This is the div I am asking about
      <mat-card-title>{{ name }}</mat-card-title>
    </div>
  </mat-card-header>
  <mat-card-content>{{ description }}</mat-card-content>
</mat-card>

Этот div добавляет 16px поля поверх 16px отступа, который mat-card расходные материалы, которые отталкивают заголовок от границы карты на 32 пикселя.

Спецификации моего дизайна говорят, что заголовок должен находиться на 16px от границы, а не 32px.

Как лучше всего это сделать? 1035 *?

Ретрансляция на div, который появляется там, и стилизация чего-то вроде mat-card-header > div, кажется неправильным, так как я бы стилизовал эту конкретную реализацию материальной карты. В следующей версии этот div может в конечном итоге стать другим элементом.

Я мог бы сделать:

mat-card-header mat-card-title {
 margin-left: -16px;
 margin-right: -16px;
}

Но это опять-таки кажется мне хакерским.

Что за предполагаемый способ переопределения внутренних стилей этих компонентов?

Answer 1

Два способа, которые я знаю

1. Глобальный уровень: - Если вы хотите, чтобы стиль применялся ко всем картам в вашем приложении, добавьте стиль в свои стили.s css / css удаление отступов / полей для получения необходимого эффекта.

2. Уровень компонента: - Если вы хотите этот стиль только внутри определенного компонента, где используется мат-карта, добавьте стиль в файле component.s css / css. Но убедитесь, что вы используете оператор прокола теней, чтобы стиль работал.

Этот подход можно использовать и в других сценариях ios. Надеюсь, это поможет.