如何更改 Ionic 4 中离子按钮的字体粗细？

Question

在 Ionic 4 中，我知道对于某些事情我应该使用阴影 dom，并像这样修改组件：

ion-button {
  --ion-font-family: 'Montserrat', sans-serif;
  --border-radius: 8px;
}

但是如果我想改变按钮的字体粗细怎么办？

如果您查看按钮的 css，您会发现没有 shadowdom css 重量变量，就像填充或字体系列一样：

.sc-ion-buttons-md-s ion-button {
    --padding-top: 0;
    --padding-bottom: 0;
    --padding-start: 8px;
    --padding-end: 8px;
    --box-shadow: none;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
}

据我所知，我能做到的唯一方法是像这样进行内联样式设置：

<ion-button color="primary" fill="solid" shape="round">
  <p class="ion-padding-horizontal" style="font-weight: 700;">Get Started</p>
</ion-button>

但现在我觉得又回到了 1996 年。什么是干净的方法来做到这一点？

Answer 1

我补充道：

ion-button {
    font-weight: 700;
}

我的一个随机项目，它按预期工作。

然后我添加了 <p> </p> 标签，就像你在我的按钮中的示例代码中一样，带有按钮的文本，font-weight 不再影响文本。

如果您正在使用 <p> </p> 标签，请删除它们，然后重试。

如何更改 Ionic 4 中离子按钮的字体粗细？

How do I change font weight for ion-button in Ionic 4?

ionic-framework

ionic4