如何修改PrimeReact DataTable中的展开图标及解决图标不显示问题

当然有办法修改PrimeReact DataTable的展开图标啦！我来给你分享几种实用的方案，不管是图标显示异常还是想自定义图标样式/内容都能解决：

1. 完全自定义展开/收起图标（最灵活的方式） #

PrimeReact的RowExpander组件支持通过template属性完全自定义触发按钮的内容，你可以随便换成自己想要的图标、文字甚至SVG：

<DataTable value={yourDataset}>
  {/* 自定义展开列 */}
  <Column 
    rowExpander 
    template={(rowData, { expanded }) => (
      <button className="p-row-toggler p-link">
        {/* 这里用PrimeIcons举例，你可以换成任何图标 */}
        {expanded ? 
          <i className="pi pi-chevron-up" style={{ color: '#2196F3' }} /> : 
          <i className="pi pi-chevron-down" style={{ color: '#666' }} />
        }
      </button>
    )} 
  />
  {/* 你的其他列定义 */}
  <Column field="name" header="名称" />
  <Column field="age" header="年龄" />
</DataTable>

这种方式能完全控制图标的样式、状态切换逻辑，适合需要高度定制的场景。

2. 直接设置图标属性（PrimeReact 8+版本适用） #

如果你的PrimeReact版本是8及以上，RowExpander提供了更简洁的icon和collapsedIcon属性，不用写模板就能快速替换图标：

<DataTable value={yourDataset}>
  <Column 
    rowExpander 
    icon="pi pi-plus-circle"  {/* 未展开时的图标 */}
    collapsedIcon="pi pi-minus-circle"  {/* 展开后的图标 */}
  />
  {/* 其他列 */}
</DataTable>

这里的pi pi-xxx是PrimeIcons的类名，你可以选择内置的任意图标来替换。

3. 修复默认图标不显示的问题 #

如果你的默认图标压根不显示，大概率是PrimeIcons没有正确引入，可以检查下项目的入口文件（比如main.js/App.js）里有没有导入PrimeIcons的CSS：

// 导入PrimeIcons样式
import 'primeicons/primeicons.css';
// 别忘了同时导入DataTable的样式
import 'primereact/resources/primereact.css';
import 'primereact/resources/themes/saga-blue/theme.css'; // 或者你使用的其他主题

要是导入了还是有问题，也可以用上面的自定义模板方案直接替换成自己的图标。

4. 仅修改默认图标的样式 #

如果只是默认图标颜色、大小不合适，不想换图标，直接用CSS覆盖默认样式就行：

/* 修改未展开状态的图标 */
.p-datatable .p-row-toggler .pi-chevron-down {
  color: #2196F3;
  font-size: 1.2rem;
  margin-right: 4px;
}

/* 修改展开状态的图标 */
.p-datatable .p-row-toggler.p-highlight .pi-chevron-up {
  color: #FFC107;
  font-size: 1.2rem;
}

内容的提问来源于stack exchange，提问作者チュンド