修复 NextUI Modal 组件在 iOS 上的问题

2024-10-12

NextUI 总算推出了一个修复 Modal 在 iOS 上必须固定定位的版本,但是我更新之后,它依旧存在点细节问题,由于其父元素使用 Flex 布局,但采用了 align-items: center 来定位居中,因此有一个 Bug,弹出键盘之后上半部分无法显示,参考我往常的经验应该使用 margin-top: auto; margin-bottom: auto。还有一个滚动容器导致下半部分“截肢”的问题但是它写的不好咱也没有什么办法呢。

以下是我的样式覆盖方案,可以解决它默认的一些奇怪规则。item-start 让 Flex 默认对齐,h-auto 覆盖其 JS 控制的奇怪高度,my-auto 居中并修复“截肢”问题。

<Modal
  placement="center"
  shouldBlockScroll={false}
  classNames={{ wrapper: "items-start h-auto", base: "my-auto" }}
>
  ...
</Modal>
一般
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君