Ionic React应用中IonImg组件border-radius设置不生效问题求助

核心原因：IonImg 组件内部封装了原生img标签，默认未开启溢出裁剪，直接给组件根节点设置border-radius时，内部图片会超出圆角边界，导致效果不显示。

方案1：开启溢出裁剪 + 直接设置内部img样式 #

修改你的aboutUs.scss文件如下：

.about-us{
  padding: 1.25em;
  .about-image{
    border-radius: 5em;
    overflow: hidden; /* 裁剪超出圆角范围的图片内容 */
  }
  /* 也可以直接命中内部原生img设置圆角，效果更稳定 */
  .about-image img {
    border-radius: 5em;
  }
}

方案2：使用Ionic官方提供的part伪类选择器（推荐，适配Shadow DOM规范） #

IonImg 组件对外暴露了image part用于自定义内部图片样式，写法更符合Ionic组件样式规范：

.about-us{
  padding: 1.25em;
  .about-image::part(image) {
    border-radius: 5em;
  }
}

两种方案任选其一即可实现预期圆角效果。

内容的提问来源于stack exchange，提问作者Mahmudul Hasan