如何为Forge Viewer自定义上下文菜单添加样式区分默认选项？

你遇到的className字段不起作用的问题，是因为Forge Viewer的上下文菜单组件并未直接支持通过该字段自定义样式。要区分自定义菜单与默认选项，可尝试以下两种方案：

方案一：标识标题+CSS/JS补全样式 #

1. 给自定义菜单标题添加专属标识，比如前缀[自定义]：

menu.push({
  title: '[自定义] Show details',
  target: [{
    title: '[自定义] Hub details',
    target: () => {
      this.emit('context.details', {
        event, node, type: 'hubs'
      })
    }
  }]
})

2. 通过CSS或JS为带标识的菜单项设置样式：

• 若浏览器支持:contains伪类，直接用CSS匹配：

.adsk-viewing-context-menu li:contains('[自定义]') {
  background-color: #f0f8ff;
}

• 兼容性更好的JS+CSS方式：

// 监听菜单创建事件
viewer.addEventListener(Autodesk.Viewing.CONTEXT_MENU_CREATED_EVENT, (event) => {
  const menuItems = document.querySelectorAll('.adsk-viewing-context-menu li');
  menuItems.forEach(item => {
    if (item.textContent.includes('[自定义]')) {
      item.classList.add('custom-context-menu-item');
    }
  });
});

.custom-context-menu-item {
  background-color: #f0f8ff;
}

方案二：通过菜单创建事件直接修改DOM #

利用CONTEXT_MENU_CREATED_EVENT钩子，在菜单生成后直接定位自定义菜单项并设置样式：

viewer.addEventListener(Autodesk.Viewing.CONTEXT_MENU_CREATED_EVENT, (event) => {
  // 自定义菜单的标题列表
  const customTitles = ['Show details', 'Hub details'];
  const menuItems = document.querySelectorAll('.adsk-viewing-context-menu li');
  menuItems.forEach(item => {
    if (customTitles.includes(item.textContent.trim())) {
      item.style.backgroundColor = '#f0f8ff';
      // 也可添加自定义类方便后续样式维护
      item.classList.add('custom-menu-item');
    }
  });
});

注意：Viewer的DOM结构可能随版本更新变化，升级后需验证样式是否正常生效。

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