PrimeReact Datatable动态列中如何正确定义headerStyle？

这个功能完全可行，你当前代码里的问题是headerStyle的语法错误——在JavaScript对象中定义样式只需要一层大括号，双大括号是JSX的插值语法，不适合用在这里。以下是具体实现方式：

1. 静态样式写法 #

直接传入单大括号包裹的样式对象，这是最常用的方式：

const columns = [
  {
    field: 'code',
    header: 'Code',
    body: bodyTemplate,
    headerStyle: { minWidth: '15rem' }, // 修正为单大括号
    sortable: true, // 补充：sortable应为布尔值，而非字符串'sortable'
  },
  // 其他列配置...
];

2. 动态样式写法 #

如果需要根据列的属性（比如field、header）动态生成表头样式，可以传入一个返回样式对象的函数：

const columns = [
  {
    field: 'code',
    header: 'Code',
    body: bodyTemplate,
    headerStyle: (colData) => {
      // colData包含当前列的所有配置信息，比如colData.field
      return colData.field === 'code' ? { minWidth: '15rem', color: '#333' } : { minWidth: '12rem' };
    },
    sortable: true,
  },
  {
    field: 'name',
    header: 'Name',
    headerStyle: () => ({ minWidth: '20rem', fontWeight: '600' }),
    sortable: true,
  },
  // 其他列配置...
];

注意事项 #

• 样式对象的属性名可以用驼峰式（比如minWidth），也可以用字符串形式的短横线式（比如'min-width'），PrimeReact都支持。
• 如果需要添加多个样式，直接在对象中追加属性即可，比如{ minWidth: '15rem', textAlign: 'center' }。

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