Electron.js菜单圆角问题：如何修改子菜单边框圆角？

Electron的原生菜单栏调用的是系统自带的菜单组件，样式（包括圆角）完全由操作系统控制，官方确实没有提供修改原生菜单圆角的API。要解决这个问题，只能放弃原生Menu API，用自定义菜单栏组件实现，这样就能完全控制菜单样式。

具体步骤如下：

• 隐藏原生菜单栏
  在创建主窗口时，通过配置参数隐藏原生菜单：

  // main.js
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true, // 自动隐藏，按Alt可临时显示；要完全移除用menu: null
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });
  

• 用React实现自定义菜单栏
  在React项目中编写自定义菜单栏组件，父菜单和子菜单均用普通HTML元素+CSS控制样式，示例如下：

  // components/CustomMenu.jsx
  import { useState } from 'react';
  import './CustomMenu.css';
  
  export default function CustomMenu() {
    const [showFileSubmenu, setShowFileSubmenu] = useState(false);
  
    return (
      <div className="custom-menu-bar">
        <div 
          className="menu-item"
          onClick={() => setShowFileSubmenu(!showFileSubmenu)}
        >
          文件
          {showFileSubmenu && (
            <div className="submenu">
              <div className="submenu-item">新建</div>
              <div className="submenu-item">打开</div>
              <div className="submenu-item">保存</div>
            </div>
          )}
        </div>
        {/* 编辑、视图等其他菜单可按相同逻辑实现 */}
      </div>
    );
  }
  

  对应的CSS直接设置子菜单的圆角：

  /* components/CustomMenu.css */
  .custom-menu-bar {
    display: flex;
    background-color: #f0f0f0;
    padding: 4px 8px;
  }
  
  .menu-item {
    padding: 6px 12px;
    cursor: pointer;
    position: relative;
  }
  
  .menu-item:hover {
    background-color: #e0e0e0;
  }
  
  .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px; /* 这里修改圆角大小，设为0就是直角 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    min-width: 120px;
  }
  
  .submenu-item {
    padding: 6px 16px;
    cursor: pointer;
  }
  
  .submenu-item:hover {
    background-color: #e8f0fe;
  }
  

• 集成自定义菜单栏到主应用
  在App.js中引入组件，放在页面顶部即可：

  // App.js
  import CustomMenu from './components/CustomMenu';
  
  function App() {
    return (
      <div className="App">
        <CustomMenu />
        {/* 其他应用内容 */}
      </div>
    );
  }
  

这种方案完全脱离系统原生菜单，所有样式都由你自主控制，不仅能修改圆角，还能自定义颜色、阴影、hover效果等。如果坚持使用原生菜单，目前没有办法修改圆角——这是系统级样式，Electron未提供对应配置项。

内容的提问来源于stack exchange，提问作者Jad Al-Hamwi