mat-card, how to change default padding

Question

I want to change the global, default padding on a Angular Material, mat-card.

In the angular.json I have this specification:

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

i make the adjustment inside of styles.scss

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

Result is that margin works, while padding does not. this is the result in the devtools. I see there is a .mat-card in <style> that takes precedence.

How do I set the padding on a global basis on a mat-card?

Answer 1

You must scope them. Angular will take css of its own component first. So if you want to change globally scope them with any class name such as 'custom'.

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

In stylesheet

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

To know more, refer to angular material customizing

Answer 2

dotless: .mat-card --> mat-card

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