mdb-card-text font size

web
mobile

Topic: mdb-card-text font size

mdb2 pro asked 4 months ago

How can I change the text size of text inside a specific card in its mdb-card-text element, for that specific card (component), not globally.

e.g., I have an info card where I need the text size to be 36px

More specifically, how can I override:

.card .card-body .card-text {
    color: #747373;
    font-size: .9rem;
    font-weight: 400;
}

And in a similar case, how can I remove this margin, at the end of the card's text:

.card-text:last-child {
    margin-bottom: 1rem!important;
}

Thanks


Damian Gemza staff answered 4 months ago

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


mdb2 pro answered 4 months ago

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


Damian Gemza staff answered 4 months ago

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


mdb2 pro answered 4 months ago

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


Damian Gemza staff commented 4 months ago

If you want, you can try to use the old one approach - div.card-text, but this is not recommended way by us.


Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.0.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No