PrimeReact ContextMenu菜单标签字体颜色修改及版本兼容问题

PrimeReact 9.x版本重构了ContextMenu组件的API，原7.0.0版本中使用的template属性已被废弃，导致原有自定义样式的代码失效。以下是两种可行的替代方案：

方案一：使用content属性自定义单个菜单项 #

新版本中，每个菜单项可通过content属性传入自定义渲染函数，替代旧版的template：

const items = [
  {
    label: "label1",
    content: (item, options) => (
      <div
        className={options.className}
        onClick={options.onClick}
        style={{ display: 'flex', alignItems: 'center' }} // 保持组件原有布局对齐
      >
        <span style={{ color: "red" }}>{item.label}</span>
      </div>
    )
  },
  {
    label: "label2",
    content: (item, options) => (
      <div
        className={options.className}
        onClick={options.onClick}
      >
        <span style={{ color: "blue" }}>{item.label}</span>
      </div>
    )
  }
];

注意需要保留options.className和options.onClick，确保菜单项的默认交互样式和点击逻辑正常生效。

方案二：通过自定义类名+CSS控制样式 #

如果不需要复杂的DOM结构，更推荐这种方式：给每个菜单项指定className，然后通过CSS选择器设置字体颜色，更符合组件样式规范：

定义菜单项 #

const items = [
  {
    label: "label1",
    className: "red-menu-item"
  },
  {
    label: "label2",
    className: "blue-menu-item"
  }
];

添加CSS样式 #

/* 针对菜单项文本设置颜色 */
.red-menu-item .p-menuitem-text {
  color: red !important;
}

.blue-menu-item .p-menuitem-text {
  color: blue !important;
}

使用!important是为了覆盖PrimeReact默认的组件样式优先级，如果你的CSS引入顺序在PrimeReact样式之后，也可以省略。

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