为什么我不能在 div 中设置离子按钮的样式答案

【问题标题】：Why can't I style ion-button inside div为什么我不能在 div 中设置离子按钮的样式
【发布时间】：2020-09-20 15:29:18
【问题描述】：

我在具有类“底部”的 div 中具有类“record-btn”的离子按钮。我想让那个按钮变成圆形（完整的圆圈）。但我不能用css做到这一点。这是我的代码。

HTML

<ion-content>
  <div class="bottom-section">
    <ion-button color="danger" size="large" class="record-btn">
      <ion-icon slot="icon-only" name="mic"></ion-icon>
    </ion-button>
  </div>
</ion-content>

SCSS

.bottom-section .record-btn {
    border-radius: 50px;
}

我也尝试从 SCSS 中删除类 .bottom-section 但没有任何反应。谁能帮我看看怎么办？

【问题讨论】：

标签： html css ionic-framework

【解决方案1】：

那是因为您试图为封装在 shadow DOM 中的元素设置样式。要更改边框半径，您必须使用 Ionic 提供的 custom CSS property --border-radius。

要获得圆形按钮，您需要这样做，并强制宽度和高度相同。

.bottom-section .record-btn {
    --border-radius: 50%;
    height: 80px;
    width: 80px;
}

但是，对于您要完成的工作，更好的解决方案可能是使用 Floating Action Button 组件

【讨论】：