css 如何修改< p>ion-card-content中标签的字体大小

tpgth1q7 于 2023-02-26 发布在其他

关注(0)|答案(2)|浏览(147)

和问题一样，我正在开发一个使用vue 3和ion 6的项目。
我想更改<ion-card-content>中<p>标记的字体大小。
我的页面：

<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，其结构如下：

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

我看到它在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;
}

但是我不知道怎么修改，我想修改font-size：16像素。
有人能帮忙吗？谢谢。

css

来源：https://stackoverflow.com/questions/71999429/how-can-i-modify-the-font-size-of-p-tag-inside-ion-card-content-in-ionic-6

2条答案

按热度按时间

tzdcorbm1#

解决这个问题的唯一方法是删除ion-card-content标签，并替换为与ion-card-content具有相同特性的div标签。这是一个更好的解决方案，因为现在您可以自定义您的ion-card-content。
我尝试了同样的方法，它对我很有效。请记住，ion-card-content在ionic文档中没有CSS信息：https://ionicframework.com/docs/api/card-content#css-custom-properties

赞(0）回复(0）举报 2023-02-26

p4rjhz4m2#

检查：https://ionicframework.com/docs/theming/css-variables
试试javascript：

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

赞(0）回复(0）举报 2023-02-26

我来回答

css 如何修改< p>ion-card-content中标签的字体大小

2条答案

相关问题

热门标签

最新问答