如何自定义walletconnect/qrcode-modal的默认弹窗样式？

支持直接通过自定义CSS修改默认外观，该组件虽然没有暴露样式相关的配置入口，但所有渲染的DOM结构都带有固定类名/ID，无需修改源码即可完成样式覆写。

具体实现方法 #

• 该组件渲染时会将弹窗DOM挂载到全局document.body下，1.x版本最外层容器固定ID为walletconnect-qrcode-modal，内部所有元素类名均带walletconnect-固定前缀，不存在动态随机生成的类名，可直接通过CSS选择器匹配修改。
• 2.x版本（适配WalletConnect Sign v2的版本）类名规则调整为wcm-前缀，最外层容器ID为wcm-modal，覆写前可打开浏览器开发者工具选中弹窗元素，核对实际类名即可，实现逻辑完全一致。

常见样式覆写参考 #

你可以直接在全局样式文件中写入对应规则，覆盖默认样式：

/* 修改半透明遮罩层颜色、透明度 */
#walletconnect-qrcode-modal {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 修改弹窗卡片的圆角、宽度、阴影 */
#walletconnect-qrcode-modal .walletconnect-modal__card {
  border-radius: 16px;
  max-width: 360px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* 调整QR码显示尺寸、内边距 */
#walletconnect-qrcode-modal .walletconnect-qrcode__image {
  width: 240px;
  padding: 16px;
}

/* 自定义头部标题样式、隐藏不需要的底部引导区 */
#walletconnect-qrcode-modal .walletconnect-modal__header p {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}
#walletconnect-qrcode-modal .walletconnect-modal__footer {
  display: none;
}

注意事项 #

• 如果你在项目中使用了CSS Modules、Vue scoped样式等局部样式方案，需要将上述覆写样式放在全局作用域下，否则选择器会被添加局部标识，无法匹配到组件挂载在全局的DOM元素。
• 如果默认样式优先级高于你的自定义样式，可通过增加选择器层级（比如前缀加body）提升权重，非必要不推荐使用!important。
• 不要直接修改node_modules目录下的包源码，后续依赖升级时所有手动修改的内容都会被覆盖，维护成本极高。

若你需要更深度的自定义（比如替换弹窗内部结构、新增自定义操作按钮），不建议继续使用qrcode-modal包，可以直接基于WalletConnect核心API自行实现QR码渲染层，灵活度更高。

内容的提问来源于stack exchange，提问作者Mohanraj G