微信小程序右上角胶囊按钮无法直接修改样式，因其为微信原生控件，CSS完全无效；唯一可行方案是通过navigationStyle: custom隐藏原生胶囊，再用uni.getMenuButtonBoundingClientRect()获取位置动态渲染自定义view，并同步配置navigationBarTextStyle适配状态栏图标颜色。
微信小程序的右上角胶囊按钮无法直接修改样式——background-color、border-radius、font-size 等任何 CSS 属性对它都无效，这是微信原生控件的强制限制，不是 uni-app 的 bug 或配置遗漏。
为什么 uni.getMenuButtonBoundingClientRect() 拿不到样式控制权
这个 API 只返回位置信息（top、right、height 等），不提供样式接口。胶囊由微信客户端渲染，运行在系统级 UI 层，开发者 JS 和 CSS 完全无法触达它的绘制过程。
- 尝试给
::after伪元素或覆盖position: fixed元素加z-index并不能“改”它，只能遮挡或模拟 - 哪怕在
pages.json里写"navigationBarBackgroundColor": "#fff"，也只影响原生导航栏（已被navigationStyle: custom隐藏） - 所有试图 hook
WXWebview或注入 style 标签的操作，在真机和审核中均不可行
真正能落地的“修改样式”方案：自定义替代组件
所谓“修改”，实际是隐藏原生胶囊 + 在相同位置画一个你完全可控的 <view>。
- 先在
pages.json中设置"navigationStyle": "custom"，确保原生胶囊和导航栏都不显示 - 在页面
onLoad或onMounted中调用uni.getMenuButtonBoundingClientRect()，拿到top、right、height、width - 用这些值动态设置自定义胶囊的
style：top: menuButtonInfo.top + 'px'，right: (windowWidth - menuButtonInfo.right) + 'px'（避免硬编码7px） - 自定义组件内可自由设
background-color: white、border-radius: 4px、图标字体、点击反馈等
必须同步处理的状态栏图标颜色
隐藏原生导航栏后，顶部时间、信号、电量图标的颜色不会自动适配你的新背景——它由 navigationBarTextStyle 控制，且必须写在 pages.json 对应页面的 style 里：
- 若自定义胶囊背景是深色（如
#1a1a1a），配"navigationBarTextStyle": "white" - 若背景是白色或浅色，配
"navigationBarTextStyle": "black" - 这个字段不支持动态绑定，也不能用 JS 修改，必须提前配好
横竖屏切换和键盘弹出时胶囊位置会偏移
微信目前没有提供 menuButtonResize 类事件，uni.getMenuButtonBoundingClientRect() 在 onLoad 拿到的值仅对初始状态有效。一旦用户旋转屏幕或弹出软键盘，right 和 top 实际已变，但你的自定义胶囊还钉在老位置。
目前唯一可行的兜底方式是：监听 resize（H5）或 onWindowResize（App），对小程序则需手动触发重获取——比如在 onShow 中再次调用并更新 style，或用 IntersectionObserver 监听视口变化（精度有限）。这点极易被忽略，上线后 iPhone 14 Pro 用户横屏进搜索页，常出现自定义胶囊错位盖住输入框。
