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

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

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](/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