React AgGrid自定义单元格编辑器如何继承默认样式？

这问题我碰到过，给你几个靠谱的解决思路：

1. 直接套用AG Grid默认编辑器的CSS类 #

AG Grid的默认文本编辑器自带ag-cell-edit-input样式类，直接给你的输入框加上，就能自动对齐默认样式——包括边框、尺寸、字体这些细节。另外再加个逻辑处理双击进入时自动选中文本的问题：

import { useEffect, useRef } from 'react';

export default ({ value, onValueChange }) => {
  const inputRef = useRef(null);

  useEffect(() => {
    // 挂载后自动选中文本
    if (inputRef.current) {
      inputRef.current.select();
    }
  }, []);

  return (
    <input
      ref={inputRef}
      type="text"
      className="ag-cell-edit-input" // 关键：套用默认样式类
      value={value || ''}
      onChange={({ target: { value }}) => onValueChange(value === '' ? null : value)}
    />
  );
}

这个方法最快，能一次性解决边框、尺寸、字体不对齐的问题。

2. 基于官方agTextCellEditor扩展（推荐复杂场景用） #

如果要加自定义popper这类功能，直接包装官方的agTextCellEditor更稳妥——完全继承默认编辑器的样式和行为，你只需要专注实现自己的扩展功能：

import { useEffect, useRef } from 'react';
import { agTextCellEditor } from '@ag-grid-community/react'; // 导入默认编辑器

export default (props) => {
  const editorRef = useRef(null);

  useEffect(() => {
    // 复用默认编辑器的文本选中逻辑
    if (editorRef.current?.getInputElement()) {
      editorRef.current.getInputElement().select();
    }
  }, []);

  return (
    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
      {/* 渲染官方默认编辑器 */}
      <agTextCellEditor
        ref={editorRef}
        {...props} // 传递所有编辑器参数
      />
      {/* 你的自定义popper组件 */}
      <div className="your-custom-popper">
        <input type="text" placeholder="搜索..." />
        {/* 其他popper内容 */}
      </div>
    </div>
  );
}

3. 手动调整样式（兜底方案） #

如果上面两种方法不适用，就手动写CSS对齐默认样式：

.custom-cell-editor-input {
  border: none; /* 去掉额外边框 */
  width: 100%;
  height: 100%;
  padding: 0 4px; /* 和默认编辑器padding对齐 */
  font-family: inherit; /* 继承单元格字体 */
  font-size: inherit;
  line-height: inherit;
  background-color: transparent;
}

.custom-cell-editor-input:focus {
  outline: none; /* 去掉默认聚焦边框，匹配AG Grid行为 */
}

然后在组件里使用这个类，再加上文本选中逻辑，就能和默认编辑器样式一致。

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