Question

在Ionic 4中，我知道某些情况下我应该使用shadow dom，并修改这样的组件：

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

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

如果您查看按钮的css，您会发现没有阴影的css变量可以像padding或font-family那样用于权重：

.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中更改离子按钮的字体粗细？

1 个答案: