如何在 Ionic 4 中更改 ion-button 的字体粗细？

Question

在 Ionic 4 中，我知道对于某些事情我应该使用 shadow 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>标签然后再试一次。