electron高版本elementui样式混乱

Question

想问下我原本项目是electron13版本，今天把他升到最新了。升级到最新以后elementui样式错误，比如这样：

我试了各种版本，19以下样式正常，19以上样式错误。但是我项目中用到屏幕共享功能，需要electron22以上的版本中的配置，22以下会报错。
elementui原来是2.12版本，现在升到最新2.15了

Answer 1

下午好🌅🌅🌅
本答案参考通义千问

根据你的描述，问题的核心在于 Electron 从 19 版本开始引入了一些 CSS 样式相关的更改（例如 Shadow DOM 的启用），这导致了 Element UI 的样式出现了混乱。而你需要同时满足 Electron 22+ 和 Element UI 的兼容性。

以下是详细的解决方案：

---

问题分析

1. Electron 19+ 的变化

   • Electron 19 开始默认启用了 Shadow DOM，这会影响全局样式的作用范围。
   • Element UI 的组件依赖于全局样式，因此在 Shadow DOM 启用后，其样式可能无法正确渲染。

2. Element UI 的版本问题

   • 你提到 Element UI 2.12 在 Electron 19+ 下样式正常，但 2.15 会出现问题。
   • 这可能是由于 Element UI 在更高版本中对全局样式的依赖没有很好地适配 Shadow DOM。

3. 需求冲突

   • 你需要使用 Electron 22+，但同时希望 Element UI 的样式能够正常工作。

---

解决方案

方案一：禁用 Electron 的 Shadow DOM

如果你不需要 Shadow DOM 的特性，可以通过禁用它来解决样式问题。

1. 修改 main.js 文件 在主进程中设置 webPreferences，禁用 Shadow DOM：

   const { app, BrowserWindow } = require('electron');
   
   let mainWindow;
   
   app.whenReady().then(() => {
     mainWindow = new BrowserWindow({
       webPreferences: {
         webviewTag: true, // 确保启用 webview
         enableRemoteModule: false, // 如果不需要远程模块，可以禁用
         contextIsolation: false, // 如果不需要隔离上下文，可以禁用
         nativeWindowOpen: true,
         preload: __dirname + '/preload.js',
         disableBlinkFeatures: 'ShadowDOM', // 禁用 Shadow DOM
       },
     });
   
     mainWindow.loadURL('http://localhost:8080'); // 替换为你的应用地址
   });
   

2. 重启应用 修改完成后重新启动应用，检查样式是否恢复正常。

---

方案二：升级 Element UI 到兼容版本

如果你必须使用 Shadow DOM，可以尝试升级 Element UI 到最新版本（如 2.16 或更高），看看是否修复了相关问题。

1. 升级 Element UI 在项目根目录运行以下命令：

   npm install element-ui@latest --save
   

2. 检查文档 查看 Element UI 官方文档，确认是否有针对 Shadow DOM 的适配说明。

---

方案三：手动修复样式

如果上述方法都无法解决问题，可以尝试手动调整样式。

1. 定位问题样式 使用浏览器开发者工具检查哪些样式被覆盖或丢失。

2. 添加自定义样式 在应用中添加自定义的 CSS 文件，覆盖 Element UI 的样式。例如：

   /* custom.css */
   .el-button {
     padding: 10px 20px !important;
     font-size: 14px !important;
   }
   

3. 引入自定义样式 在应用入口文件中引入自定义样式：

   import './custom.css';
   

---

方案四：降级 Electron 至兼容版本

如果你的项目对 Electron 的某些功能没有强制要求，可以考虑降级到 Electron 19-21 版本，这样可以避免 Shadow DOM 的问题。

1. 修改 package.json 将 Electron 的版本降级到 19-21：

   "dependencies": {
     "electron": "^19.0.0"
   }
   

2. 重新安装依赖 运行以下命令：

   npm install
   

---

总结

根据你的需求和项目情况，推荐优先尝试以下步骤：

1. 禁用 Shadow DOM（方案一），这是最简单且有效的解决方法。
2. 如果需要保留 Shadow DOM，尝试升级 Element UI 到最新版本（方案二）。
3. 如果问题依然存在，可以手动修复样式（方案三）。
4. 最后，如果以上方法都不适用，可以考虑降级 Electron 版本（方案四）。

希望这些方案能帮助你解决问题！如果还有疑问，请进一步补充信息。