PrimeReact ContextMenu 菜单项标签颜色自定义指南

const items = [
  {
    label: "label1",
    template: (item, options) => (
      <div className={options.className} onClick={options.onClick}>
        <span style={{ color: "red" }}>
          {item.label}
        </span>
      </div>
    )
  }
];

import React, { useRef } from 'react';
import { ContextMenu } from 'primereact/contextmenu';
import { Toast } from 'primereact/toast';
import { Button } from 'primereact/button';

// 请确保您的项目中已引入 PrimeReact 的主题、核心CSS和PrimeIcons
// 例如，在您的主应用入口文件 (如 App.js 或 index.js) 中：
// import 'primereact/resources/themes/saga-blue/theme.css'; // 选择您喜欢的主题
// import 'primereact/resources/primereact.min.css';         // PrimeReact 核心 CSS
// import 'primeicons/primeicons.css';                       // PrimeIcons 图标库
// import 'primeflex/primeflex.css';                         // (可选) PrimeFlex 用于布局辅助类

export default function ContextMenuCustomLabels() {
    const cm = useRef(null); // 用于引用 ContextMenu 组件
    const toast = useRef(null); // 用于显示操作消息

    // 辅助函数：显示一个Toast消息
    const showMessage = (message) => {
        toast.current.show({ severity: 'info', summary: '操作', detail: message });
    };

    // 定义 ContextMenu 的菜单项
    const items = [
        {
            label: '查看详情',
            icon: 'pi pi-fw pi-search',
            command: () => showMessage('执行查看详情操作')
        },
        {
            // 重点：直接将一个带有内联样式的<span>元素赋值给label
            label: <span style={{ color: 'red', fontWeight: 'bold' }}>删除数据</span>,
            icon: 'pi pi-fw pi-trash',
            command: () => showMessage('执行删除数据操作')
        },
        {
            // 另一个自定义颜色的例子
            label: <span style={{ color: 'blue', fontStyle: 'italic' }}>编辑信息</span>,
            icon: 'pi pi-fw pi-pencil',
            command: () => showMessage('执行编辑信息操作')
        },
        {
            separator: true // 分隔线
        },
        {
            label: '退出应用',
            icon: 'pi pi-fw pi-power-off',
            command: () => showMessage('执行退出应用操作')
        }
    ];

    return (
        <div className="card flex justify-content-center">
            <Toast ref={toast} />
            {/* ContextMenu 组件，通过ref与items绑定 */}
            <ContextMenu model={items} ref={cm} onHide={() => console.log('上下文菜单已隐藏')} />

            {/* 触发 ContextMenu 的按钮 */}
            <Button 
                label="右键点击这里" 
                icon="pi pi-bars" 
                className="p-button-secondary" 
                onContextMenu={(e) => cm.current.show(e)} // 在右键点击时显示菜单
            />
        </div>
    );
}