如何使用Electron修改操作系统的光标样式

普通场景光标修改 #

普通窗口内的光标直接用CSS的cursor属性即可自定义，示例如下：

/* 全局自定义光标，auto为 fallback 样式 */
:root {
  cursor: url('path/to/custom-cursor.png'), auto;
}

如果需要针对特定元素修改光标，给对应元素加上述CSS规则即可。

startDrag 拖拽场景光标修改 #

你提到的调用startDrag时的光标走的是系统级拖拽API，CSS规则不会生效，需要通过Electron的原生配置自定义，该特性仅在Electron 12及以上版本完整支持macOS环境，实现步骤如下：

• 提前准备不同拖拽状态的自定义光标图片，推荐尺寸为16×16/32×32的PNG格式，支持透明通道
• 主进程监听渲染进程的拖拽触发请求，调用startDrag时传入dragOperation配置自定义光标：

// 主进程示例代码
const { ipcMain, BrowserWindow, nativeImage } = require('electron')

ipcMain.handle('trigger-custom-drag', async (event, params) => {
  const currentWindow = BrowserWindow.fromWebContents(event.sender)
  await currentWindow.webContents.startDrag({
    // 拖拽的目标文件路径，按需配置
    file: params.draggedFilePath,
    // 拖拽时跟随鼠标的缩略图，按需配置
    icon: nativeImage.createFromPath(params.dragThumbPath),
    // macOS下拖拽不同状态的自定义光标配置
    dragOperation: {
      copy: nativeImage.createFromPath('path/to/copy-cursor.png'),
      move: nativeImage.createFromPath('path/to/move-cursor.png'),
      link: nativeImage.createFromPath('path/to/link-cursor.png'),
      none: nativeImage.createFromPath('path/to/disabled-cursor.png')
    }
  })
})

• 渲染进程触发拖拽时调用对应IPC事件即可：

// 渲染进程示例代码
const { ipcRenderer } = require('electron')

const onDragStart = async () => {
  await ipcRenderer.invoke('trigger-custom-drag', {
    draggedFilePath: '/target/file/path',
    dragThumbPath: '/drag/thumb/path'
  })
}

注意事项：

1. 低于12的Electron版本没有dragOperation配置项，无法自定义startDrag场景的系统光标，需要先升级版本
2. 自定义光标只能使用本地资源，需传入绝对路径或提前加载为NativeImage实例，不支持远程URL
3. 如果你使用的是HTML5原生拖拽API而非Electron的startDrag，仅能通过修改dataTransfer.dropEffect切换系统预设的几种光标，无法完全自定义样式。

内容的提问来源于stack exchange，提问作者Coding Edgar