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

Question

Answer 1

解决此问题的唯一方法是删除 ion-card-content 标签并替换为与 ion-card-content 具有相同特征的 div 标签。这是一个更好的解决方案，因为现在您可以自定义您的离子卡内容。

我尝试了同样的方法，它对我有用。请记住，ion-card-content 在 ionic 文档中没有 CSS 信息：https://ionicframework.com/docs/api/card-content#css-custom-properties

Answer 2

在 .css 中，您想要更改 ion-card-title 的字体大小，或在全局 css 中随处更改它。

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

Answer 3

以下内容对我有用：

ion-card-content[class*="card-content-"] > p{
  font-size: 10px !important;
}

或者如果您想针对特定类别：

ion-card-content[class*="card-content-"].card-text > p{
  font-size: 10px !important;
}

当然，这需要放在您的 global.scss 中。我希望这对某人有用。

Answer 4

尝试 JavaScript：

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