How can I modify the font size of <p> tag inside ion-card-content in ionic 6

Question

Like the question, I am developing a project using vue 3 and ionic 6.

I want to change the font-size of the <p> tag in <ion-card-content>.

my page:

<ion-card>
   <ion-card-header>
     <ion-card-title>Title</ion-card-title>
     <ion-card-subtitle>Sub Title</ion-card-subtitle>
   </ion-card-header>
   <ion-card-content v-html="data.content">
   </ion-card-content>
</ion-card>

data.content is requested from the server. Its structure is like this：

<p>This is my page!</p>
<p>Welcome to my home.</p>

I see it styled in chrome devtools.

.card-content-md p {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
}

But I don't know how to modify it, I want to modify font-size: 16px.

Can anyone help? Thank you.

Answer 1

The only way to fix this problem is to remove the ion-card-content tag and replace with a div tag with the same characteristics as the ion-card-content. This is a way better solution because now you can customize your ion-card-content.

I try the same way and it works for me. Remember that ion-card-content has no CSS information in the ionic documentation: https://ionicframework.com/docs/api/card-content#css-custom-properties

Answer 2

Check: https://ionicframework.com/docs/theming/css-variables

Try javascript:

const el = document.querySelector('.card-content-md p');
el.style.setProperty('--font-size', '16px');

Answer 3

In the .css where you want to change the Font-Size of a ion-card-title or in the global css to change it everywhere.

ion-card-title{
    font-size: 20px !important;
}