mat-card, как изменить отступ по умолчанию

Question

Я хочу изменить глобальный отступ по умолчанию для углового материала, мат-карты.

В angular.json у меня есть эта спецификация:

 "styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",           
          "src/styles/app.theme.scss",
          "src/styles/styles.scss"
        ],

я делаю настройку внутри styles.scss

.mat-card {
    margin: 5px;
    padding: 5px;}

В результате маржа работает, адополнения нет.это результат в devtools.Я вижу, что в <style> есть .mat-карта, которая имеет приоритет.

Как установить глобальные отступы на mat-card?

Answer 1

Вы должны охватить их.Angular сначала примет CSS своего компонента.Так что если вы хотите изменить глобально, включите их в область с любым именем класса, например 'custom'.

<mat-card class="custom"></mat-card>

В таблице стилей

.custom.mat-card{
  //your styles
 }

Чтобы узнать больше, обратитесь к Настройка углового материала