如何自定义React AG-Grid单元格选中轮廓并保留单元格边框？

可以通过以下两种方式实现自定义单元格边框与选中蓝色轮廓同时显示：

方法一：利用cellClassRules结合自定义CSS #

1. 先定义全局CSS类，用于设置选中单元格的轮廓样式：

.ag-cell-selected-outline {
    outline: 2px solid #1890ff; /* 匹配默认蓝色选中色调 */
    outline-offset: -1px; /* 让轮廓贴近单元格边框，避免间距过大 */
}

2. 在AG-Grid的defaultColDef中，保留自定义边框的同时，通过cellClassRules为选中单元格添加上述类：

defaultColDef: {
    cellStyle: (params) => {
        return {
            border: '1px solid #cccaca',
            boxSizing: 'border-box' /* 确保边框不会改变单元格尺寸 */
        };
    },
    cellClassRules: {
        'ag-cell-selected-outline': (params) => params.node.selected
    }
}

方法二：用box-shadow模拟选中轮廓 #

如果不想额外添加outline，也可以通过内部阴影模拟选中效果，避免与外部边框冲突：

1. 定义CSS类：

.ag-cell-selected-shadow {
    box-shadow: inset 0 0 0 2px #1890ff;
}

2. 同样在defaultColDef中配置cellClassRules：

defaultColDef: {
    cellStyle: (params) => {
        return {
            border: '1px solid #cccaca',
            boxSizing: 'border-box'
        };
    },
    cellClassRules: {
        'ag-cell-selected-shadow': (params) => params.node.selected
    }
}

原理说明：默认AG-Grid的选中轮廓通过outline实现，自定义单元格border后，可能因渲染优先级导致轮廓被遮挡。通过cellClassRules针对选中状态单独设置outline或box-shadow，可让两种样式共存且互不覆盖。

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