如何自定义@web3modal/wagmi包中Web3Modal的弹窗样式？

1. 利用官方主题配置（推荐） #

Web3Modal Wagmi内置了主题配置项，初始化实例时直接定义样式参数，比硬写CSS更适配官方组件逻辑：

import { createWeb3Modal } from '@web3modal/wagmi/react'
import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
import { WagmiProvider } from 'wagmi'

const wagmiConfig = defaultWagmiConfig({
  chains: [mainnet], // 替换为你的目标链
  projectId: 'YOUR_PROJECT_ID' // 替换为你的WalletConnect项目ID
})

// 初始化时配置自定义主题
createWeb3Modal({
  wagmiConfig,
  projectId: 'YOUR_PROJECT_ID',
  theme: {
    mode: 'dark', // 可选light/dark/auto
    colors: {
      primary: '#FF5722', // 主色调
      secondary: '#4CAF50', // 辅助色
      background: '#121212', // 弹窗背景
      surface: '#1E1E1E', // 卡片/按钮背景
      text: '#FFFFFF', // 文本颜色
      border: '#333333' // 边框颜色
    },
    radius: '12px', // 全局圆角
    font: {
      family: 'Inter, sans-serif', // 自定义字体
      size: {
        sm: '12px',
        md: '14px',
        lg: '16px'
      }
    }
  }
})

2. CSS变量+优先级覆盖 #

如果主题配置无法满足细节需求，可直接覆盖Web3Modal暴露的全局CSS变量，在global.css中添加：

/* 全局替换Web3Modal的基础样式变量 */
:root {
  --w3m-color-primary: #FF5722;
  --w3m-color-background: #121212;
  --w3m-color-surface: #1E1E1E;
  --w3m-color-text: #FFFFFF;
  --w3m-color-border: #333333;
  --w3m-radius-md: 12px;
  --w3m-font-family: 'Inter, sans-serif';
}

/* 针对弹窗容器的特定样式，用!important提升优先级 */
.w3m-modal {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

/* 自定义钱包列表项 hover 效果 */
.w3m-wallet-button {
  padding: 12px 16px !important;
  transition: background-color 0.2s ease !important;
}

.w3m-wallet-button:hover {
  background-color: rgba(255, 87, 34, 0.1) !important;
}

提示：若!important仍不生效，可使用更具体的选择器（比如结合父元素类名）来提升优先级。

3. 自定义组件插槽（高级） #

需要完全重构弹窗结构时，可使用Web3Modal的插槽功能替换默认组件：

import { Web3Modal } from '@web3modal/wagmi/react'

function CustomWeb3Modal() {
  return (
    <Web3Modal>
      {/* 自定义弹窗头部 */}
      <div slot="header" className="custom-header">
        <h2>连接你的钱包</h2>
      </div>
      {/* 自定义钱包列表区域 */}
      <div slot="wallet-list" className="custom-wallet-list">
        {/* 这里可自行渲染钱包选项，需结合wagmi的钱包数据逻辑 */}
      </div>
    </Web3Modal>
  )
}

这种方式适合完全自定义UI的场景，但需要自行处理钱包数据拉取和交互逻辑。

内容的提问来源于stack exchange，提问作者Bharti Sharma