ag-grid enableCellChangeFlash属性不生效（单元格内容变化，动画提示效果）

问题描述：

使用 ag-grid时 我需要做到数据更新时，单元格闪烁，有个动画，可以更明显的看出哪个有变化（如下图、视频）。

一变化就 背景色闪烁，这个功能是ag-grid本身就有的功能只需要 加上enableCellChangeFlash=true 和 getRowId（需要取数据里 唯一、不会重复的值。比如：id、key等等） 即可。
可以 给 defaultColDef 加 也可以直接在 AgGridReact 上加（但我 在 AgGridReact 加会提示一个警告 enableCellChangeFlash 已弃用
）。
ag-grid enableCellChangeFlash api

具体效果 可查看ag-grid finance demo

遇到的问题：

我发现我加上没用，以下是我的代码：

 import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
const MyAgGridComponent = () => {const [rowData1,setRowData1] = useState([{id:1,value:3},{id:2,value:4}]);const AgStyle = {width:'100%',height:'calc(100vh - 370px)',}const defaultColDef1 = {sortable: true,enableCellChangeFlash: true,};const columnDefs1 = [{ field: 'id', headerName: 'ID' },{ field: 'value', headerName: 'Value' },];const handleButtonClick = () => {setRowData1([{id:1,value:Math.random()},{id:2,value:Math.random()}])};const getRowStyle = function(params){return {backgroundColor: parseInt(params.node.rowIndex) % 2 == 0 ? '#fff' : '#F8FAFF'}}return (<div  className='ag-theme-quartz grid' style={AgStyle}><button onClick={handleButtonClick}>点击</button><AgGridReactcolumnDefs={columnDefs1}rowData={rowData1}defaultColDef={defaultColDef1} // 设置默认列定义animateRows={true}getRowStyle={getRowStyle}getRowId={({data}) => { // 你数据里的key、id 唯一值不会重复的值return data.id;}}/></div>);
};
export default MyAgGridComponent;

经过对比 官方的示例代码发现写的差不多，最后发现 是getRowStyle 的问题，他的优先级高，会覆盖变色的效果。
github react FinanceExample.tsx 示例代码

用 getRowClass 实现隔行变色：

const getRowClass = function(params){return parseInt(params.node.rowIndex) % 2 == 0 ? 'even-row' : 'odd-row'}
css 样式：
.even-row{background: gray !important;
}
.odd-row{background: white !important;
}

解决方案:

问题原因是：getRowStyle、getRowClass 的优先级比动画效果优先级高，所以解决方案就是 去掉 getRowStyle 或者getRowClass 属性。

但我的表格设计图效果是 隔行变色，如果不用getRowStyle 、getRowClass 的话只能用ag-grid 的原有类名覆盖它。

只需要 在css里写上：

.ag-row-odd{background: gray !important;
}
.ag-row-even{background: white !important;
}

如果怕影响全局的样式建议 在外面套一个 选择器（推荐还是 套一个 可以避免影响全局样式。如果覆盖其他样式 也应该如此）。 比如 在 AgGridReact 外面加上div 写上类名 grid。

 <div  className='ag-theme-quartz grid' style={AgStyle}><button onClick={handleButtonClick}>点击</button><AgGridReactcolumnDefs={columnDefs1}rowData={rowData1}defaultColDef={defaultColDef1} // 设置默认列定义animateRows={true}getRowStyle={getRowStyle}getRowId={({data}) => { // 你数据里的key、id 唯一值不会重复的值return data.id;}}/></div>

.grid .ag-row-odd{background: gray !important;
}
.grid .ag-row-even{background: white !important;
}

效果图：

正确的完整的代码：
我用的是企业版，付过费的，引入的包是企业的，如果你是社区版就按照官网引入社区版的包就行。
ag-grid 官网 可以用 edge浏览器翻译，或者安装一个插件 immersive-translate(沉浸式双语网页翻译扩展)，解决谷歌翻译无法使用问题

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
const MyAgGridComponent = () => {const [rowData1,setRowData1] = useState([{id:1,value:3},{id:2,value:4}]);const AgStyle = {width:'100%',height:'calc(100vh - 370px)',}const defaultColDef1 = {sortable: true,enableCellChangeFlash: true,};const columnDefs1 = [{ field: 'id', headerName: 'ID' },{ field: 'value', headerName: 'Value' },];const handleButtonClick = () => {setRowData1([{id:1,value:Math.random()},{id:2,value:Math.random()}])};const getRowStyle = function(params){return {backgroundColor: parseInt(params.node.rowIndex) % 2 == 0 ? '#fff' : '#F8FAFF'}}return (<div  className='ag-theme-quartz grid' style={AgStyle}><button onClick={handleButtonClick}>点击</button><AgGridReactcolumnDefs={columnDefs1}rowData={rowData1}defaultColDef={defaultColDef1} // 设置默认列定义animateRows={true}getRowId={({data}) => { // 你数据里的key、id 唯一值不会重复的值return data.id;}}/></div>);
};
export default MyAgGridComponent;