mdb-card-text font size

Dear [@mdb2](/profile/?id=22796)

If you want to change the styles only for one card element, please add a custom class to it, and then target this element in css by this class.

Please take a look at the below code:

.html:

<div class="row">
    <div class="col-md-6 mx-auto my-5">
      <mdb-card class="custom-class">
        <mdb-card-body>
          <mdb-card-text>Sample text</mdb-card-text>
        </mdb-card-body>
      </mdb-card>
      <mdb-card>
        <mdb-card-body>
          <mdb-card-text>Sample text 2</mdb-card-text>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>

.scss:

mdb-card.custom-class mdb-card-text .card-text {
  font-size: 36px !important;
  margin-bottom: 0 !important;
}

Best Regards,

Damian

The problem with a global "custom-class" is that styles that are only for specific components are placed in a global scss file, containing all the global styles.

Placing specific styles in the component's own scss file is a much better approach, yet I fail to see how to implement it with all the new directives.

Pleas advise

Dear @mdb2

If you want to modify the font size of mdb-card-text component within the component styles you would have to use the ::ng-deep pseudoselector.

But again, if you'll use it, you have to specify the custom class for the mdb-card component, because inside the mdb-card-text there's a <p> element, which won't inherit the styles from mdb-card-text component.

And if you won't use some custom class, the ::ng-deep styles will apply styles to the global scope.

This will be changed in MDB 9, but for now, please use one of my approaches.

Best Regards,

Damian

Thanks,

since ::ng-deep is the same as global scope, I'll use the only approach which is to use a global style, until Angular 9 solves it