React AgGrid 自定义单元格编辑器的默认样式是什么？

Question

这里https://www.ag-grid.com/react-data-grid/cell-editors/是最简单的自定义单元格编辑器的示例：

export default ({ value, onValueChange }) => {
   return (
       <input
           type="text"
           value={value || ''}
           onChange={({ target: { value }}) => onValueChange(value === '' ? null : value)}
       />
   );
} 

它可以工作，但是这个编辑器的样式有点奇怪。有一个额外的边框（也可能与默认编辑器不同），它小于单元格空间，并且字体也可能较小。并且在呈现此自定义编辑器时不会选择任何文本。

我的问题是 - 如何将默认单元格编辑器的样式应用于此组件？或者也许我可以继承默认的单元格编辑器，或者我可以将默认的单元格编辑器放在这里（也许它被命名为 agGridDefaultEditor 或其他）并在上面做我的装饰？

我的目的是用自定义弹出窗口（搜索字段所在的位置）装饰输入字段，我已经做到了，但问题是，在双击输入此单元格时，单元格本身的呈现方式与其他单元格不同。

https://www.ag-grid.com/react-data-grid/provided-cell-editors-text/提到，默认的文本编辑器称为

agTextCellEditor

。也许我可以将这个常量解析为 JavaScript 组件并将其代替

<input>

。

https://blog.ag-grid.com/learn-to-customize-react-grid-in-less-than-10-minutes/是另一个关于自定义渲染器（通过span实现）和编辑器（通过span实现）的教程通过输入），它没有提及或建议任何样式，并且仍然 - 他们的自定义字段的图片是完美的 - 与默认编辑器一致的样式。

Answer 1

我不知道为什么 AgGrid 示例（https://github.com/ag-grid/react-data-grid/blob/main/customization-demo-classes/src/NumericEditor.js）可能有效，但是我的经验表明，添加一连串的类名解决了问题，并且编辑器开始出现在默认样式中：

import React, { useState, useRef, useEffect, useImperativeHandle, forwardRef, memo } from 'react';

const MinimalAgGridCellEditor3 = ({ value, onValueChange }) => {

    return (
        <input
            type="text"
            value={value || ''}
            //onChange={({ target: { value }}) => onValueChange(value === '' ? null : value)}
            onClick={({ target: { value }}) => onValueChange('05')}
            className="ag-cell-editor ag-labeled ag-label-align-left ag-text-field ag-input-field ag-input-field-input ag-text-field-input"
        />
    );

};

export default MinimalAgGridCellEditor3;

班级名称是：

className="ag-cell-editor ag-labeled ag-label-align-left ag-text-field ag-input-field ag-input-field-input ag-text-field-input"