PrimeReact DataTable单元格条件样式不生效问题排查求助

1. 缺失PrimeFlex依赖 #

你使用的bg-green-100、w-2rem、justify-content-center这类工具类属于PrimeFlex（PrimeReact配套的CSS工具库），但代码中未导入PrimeFlex的样式文件，导致这些类无法生效。

解决方案：
先安装PrimeFlex：

npm install primeflex
# 或使用yarn
yarn add primeflex

然后在代码中添加PrimeFlex样式导入（放在PrimeReact样式之后）：

import 'primeflex/primeflex.css';

2. 类名错误 #

你使用的text-white-900不是PrimeFlex的合法类名，官方示例中使用的是text-white（白色文本），若需要深灰色文本应使用text-gray-900。错误类名会导致文本颜色不生效。

修正后的模板函数：

const stockBodyTemplate = (rowData) => {
  // 数据加载前先判断rowData是否存在，避免报错
  if (!rowData) return <div>-</div>;
  
  const stockClassName = classNames('border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm', {
      'bg-green-100 text-white': rowData.Sma_Score === 3,
      'bg-red-100 text-white': rowData.Sma_Score === -3,
      'bg-yellow-100 text-gray-900': rowData.Sma_Score === 1 || rowData.Sma_Score === -1
  });
  return <div className={stockClassName}>{rowData.Sma_Score}</div>;
};

3. 数据加载时的空值处理 #

初始状态下data为null，DataTable渲染时rowData可能为undefined，导致条件判断失效甚至报错。在模板函数中增加空值判断可避免该问题，同时提升用户体验。

4. 样式优先级验证（可选） #

若导入PrimeFlex后样式仍不生效，可尝试给自定义容器增加内联样式或更高优先级的类，确保样式被正确应用：

return <div className={stockClassName} style={{display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>{rowData.Sma_Score}</div>;

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